CSS Introduction | CSS Selectors | Selector

Selector

In CSS, selectors are used to choose the targets to which styles will be applied.

Representative selectors include the following.

Universal selector
HTML element selector
ID selector
Class selector
Group selector

Universal Selector

The universal selector selects all elements inside an HTML document as CSS targets.

<style>
    * { color: red; }
</style>

HTML Element Selector

You can select CSS targets directly by using the name of an HTML element.

<style>
    h2 { color: teal; text-decoration: underline; }
</style>
...
<h2>Apply the style to this part.</h2>

ID Selector

The ID selector is used to select a specific element as a CSS target. Among many elements included in a web page, it selects only the element that has a specific ID name.

<style>
    #heading { color: sandybrown; text-decoration: line-through; }
</style>
...
<h2 id="heading">Apply the style to this part.</h2>

In HTML and CSS, using the same ID name on multiple elements in one web page may appear to work without issues. However, duplicate IDs can cause errors when JavaScript is used. Therefore, it is better to use different ID names for elements in one web page or use classes instead.

Class Selector

The class selector is used to select multiple elements in a specific group at once. This specific group is called a class, and the selector selects all elements with the same class name.

<style>
    .headings { color: deepskyblue; text-decoration: overline; }
</style>
...
<h2 class="headings">Apply the style to this part.</h2>
<p>You can use a class selector to select the HTML elements to style all at once.</p>
<h3 class="headings">Apply the same style to this part as well.</h3>

Group Selector

The group selector is used when you want to use multiple selectors together. Group selectors connect multiple selectors separated by commas. This keeps code concise by avoiding duplicated style declarations.

<style>
    h2 { color: navy; }
    h2, h3 { text-align: center; }
    h2, h3, p { background-color: lightgray; }
</style>

CSS3 Selectors Level 3

CSS3 newly defines many selectors with various features.

Selector	Description
General sibling selector	Selects all specific elements that are siblings of the element and appear after it in the document.
`[attribute^="value"]` selector	Selects elements whose specific attribute value starts with a specific string.
`[attribute$="value"]` selector	Selects elements whose specific attribute value ends with a specific string.
`[attribute*="value"]` selector	Selects elements whose specific attribute value contains a specific string.
`:root`	Selects the root element of the document.
`:nth-child`	Selects child elements located in the nth position from the beginning among all child elements.
`:nth-last-child`	Selects child elements located in the nth position from the end among all child elements.
`:nth-of-type`	Selects elements of a specific type that appear in the nth position among all child elements.
`:nth-last-of-type`	Selects elements of a specific type that appear in the nth position from the end among all child elements.
`:last-child`	Selects the last child element among all child elements.
`:first-of-type`	Selects the first element of a specific type among all child elements.
`:last-of-type`	Selects the last element of a specific type among all child elements.
`:only-child`	Selects child elements of all elements that have only one child element.
`:only-of-type`	Selects child elements of all elements that have only one child element of a specific type.
`:empty`	Selects all elements that have no child elements.
`:target`	Selects all currently active target elements.
`:checked`	Selects all input elements in the checked state.
`:enabled`	Selects all usable input elements.
`:disabled`	Selects all unusable input elements.
`:not(selector)`	Can be used with any selector and applies the opposite meaning of that selector.