Selectors

What Is a Selector in CSS?

CSS style declarations are not applicable to all HTML elements - unless the universal selector is used - but to a programmatically pointed ones.

A CSS selector programmatically points (aka selects) elements to which given CSS style declarations apply.

An HTML element can be selected by:

a type,
an id attribute,
a class attribute,
a pseudo-class attribute,
a relation (using combined selectors),
an attribute, and
its pseudo-element status.

The respective style declarations are added to all selected elements within a given document. However, it does not mean that the selected elements shall have the style declarations actually applied as the cascading process comes into play after the selection and after adding the style declarations.

Universal Selector

The universal selector denoted by * selects:

all elements within a given HTML document when used autonomously, or
all elements within a given element when combined with another selector using general descent combinator.

* {
  font-size: 18px;
  color: blue;
}

p * {
  font-size: 18px;
  color: blue;
}

Type Selector

The CSS type selector (aka tag selector) selects all elements within a given HTML document of a given type.

p {
  font-size: 18px;
  color: blue;
}

<body>
  <p>...</p>  <!-- selected -->
  <p>...</p>  <!-- selected -->
  <div>...</div>  <!-- not selected -->
</body>

Id Selector

There can be only one element with a given id in a given HTML document. The id CSS selector selects the HTML element with the id attribute.

To select an element by its id use the # special character appended with the id.

#foo {
  font-size: 18px;
  color: blue;
}

<body>
  <p>...</p>  <!-- not selected -->
  <p id="foo">...</p>  <!-- selected -->
  <div>...</div>  <!-- not selected -->
</body>

Attribute Selector

It is possible to select elements on the basis of the presence of a given attribute using the element[attribute] syntax. For example: a[onclick] selects only a elements with onclick attribute present.

Further, it is possible to select elements on the basis of values of their attributes. For example, a[href="https://soundof.it"] selects only a elements with href attribute with the value of https://soundof.it. Special value matchers such as *= (containing anywhere), ^= (prefixed by), $= (suffixed by), and ~= (containing in a list) can be used to match values.

Class Selector

The class CSS selector selects all HTML elements with a given class attribute.

There can be an unlimited number of HTML elements with a given class in an HTML document.

To select all elements with a given class use the . character appended with the class.

.bar {
  font-size: 18px;
  color: blue;
}

<body>
  <p class="bar">...</p>  <!-- selected -->
  <p id="foo">...</p>  <!-- not selected -->
  <div>...</div>  <!-- not selected -->
</body>

An element can have more than one class at the same time. All the element's classes are within the value of the same class attribute separated by spaces.

<p class="foo bar foobar">...</p>

Pseudo-Class Selector

A pseudo-class selector selects an element or elements having a specific pseudo-class attribute which is assigned to those elements automatically on the basis of their:

specific state (e.g. being hovered, focused, checked, unvisited, visited), or
specific structure or placement in reference to another element (e.g. being a first child or an n-th element).

A pseudo-class is denoted by a colon (:) appended with a keyword.

Specific State Pseudo-Class Selectors

The purpose of specific state pseudo-class selectors is to add style declarations to a given element or elements only when the elements are in a specific state.

The notable specific state pseudo-class selectors are:

:link - selects non-visited anchor elements,
:visited - selects visited anchor elements,
:hover - selects an element being hovered over,
:focus - selects a focused element,
:enabled - selects all enabled form elements,
:disabled - selects all disabled form elements,
:read-only - selects all read-only form elements,
:checked - selects checked form elements,
:required - selects required form elements
:optional - selects optional form elements

Specific Structure or Placement Selectors

There is one notable specific structure selector, namely :empty. It selects all elements without any content other than spaces.

There are many specific placement in reference to other element selectors. The most notable are:

:only-child - selects elements being the only children of another elements,
:only-of-type - selects elements with specific type being the only children of another elements,
:first-child / :last-child - selects elements being the first / last children of another elements,
:first-of-type / :last-of-type - selects elements with specific type being the first / last children of another element,
:nth-child / :nth-last-child - uses an+b notation and selects elements being nth children (counting respectively from the beginning / end) of another elements,
:nth-of-type / :nth-last-of-type - uses an+b notation to select nth (counting respectively from the beginning / end) children of another elements with a specific type,

Implicit Universal Selector Before Pseudo-Classes

When no selector is provided before a pseudo-class a universal selector is implicitly added.

Therefore, p :first-child really means p *:first-child which selects all elements in a given document being the first children of p elements. This is different from p:first‑child which selects all p elements being at the same time first children of other elements.

Chaining Class & Pseudo-Class Selectors

Both class selectors and pseudo-class selectors can be chained together with each other and with other selectors to select elements more specifically.

For example:

p.foo - selects p elements that have the class foo at the same time (compare it to p .foo combined selector),
.foo.bar - selects elements having both the foo and bar classes at the same time,
p:first-child - selects p element that are first children of other elements (compare it to p :first-child combined selector).

Grouping (aka Listing) Selectors

It is possible to associate a given style declaration with more than one selector at the same time using selector grouping (aka listing) using the , (comma) special character.

For example:

div, p { ... } - associates a given style declaration with both div and p elements (compare it to div p combined selector).
#foo, p:first-child, .bar { ... } - associates a given style declaration with the element having the #foo id, with p elements being first children of other elements and with elements having the .bar class.

Combined Selectors

A combinator is a keyword that indicates a relation between selectors.

Combined selectors are selectors that are built with at least two other selectors joined by combinators which select elements on the basis of their relation towards other elements.

There are the following kind of combinators is CSS:

space - general descent relation,
> - direct descent (child) relation
~ - general sibling relation,
+ - direct (adjacent) sibling relation.

General Descendant Selector

The general descendant selector is a CSS selector that uses the space combinator and selects elements being direct and indirect descendants of a specific element or elements.

For example to select all p elements being direct and indirect descendants of div elements the div p general descendant selector should be used.

div p {
  ...
}

<body>
  <div>
    <p>...</p>  <!-- selected -->
    <section>
      <p>...</p>  <!-- selected -->
    </section>
  </div>
  <p>...</p>  <!-- not selected -->
</body>

Direct Descendant (Child) Selector

The direct descendant (child) selector is a CSS selector that uses the > combinator and selects elements being direct descendants (children) of a specific element or elements.

For example to select all p elements being direct descendants (children) of div elements the div > p direct descendant (child) selector should be used.

div > p {
  ...
}

<body>
  <div>
    <p>...</p>  <!-- selected -->
    <section>
      <p>...</p>  <!-- not selected -->
    </section>
  </div>
  <p>...</p>  <!-- not selected -->
</body>

General Sibling Selector

The general sibling selector is a CSS selector that uses the ~ combinator and selects elements following directly or indirectly a specific element or elements with the same parent element.

For example, to select all p elements being direct and indirect siblings of div elements the div ~ p general sibling selector should be used.

div ~ p {
  ...
}

<body>
  <div>
    <p>...</p>  <!-- not selected -->
  </div>
  <p>...</p>  <!-- selected -->
  <p>...</p>  <!-- selected -->
  <section>
    <p>...</p>  <!-- not selected -->
  </section>
</body>

Direct (Adjacent) Sibling Selector

The direct (adjacent) sibling selector is a CSS selector that uses the + combinator and selects elements following directly a specific element or elements with the same parent element.

For example, to select all p elements being direct (adjacent) siblings of div elements the div + p direct (adjacent) sibling selector should be used.

div + p {
  ...
}

<body>
  <div>
    <p>...</p>  <!-- not selected -->
  </div>
  <p>...</p>  <!-- selected -->
  <p>...</p>  <!-- not selected -->
</body>