In CSS, selectors are patterns used to select DOM elements.

Here is an example of using selectors. In the following code, a and h1 are selectors:

a {
  color: black;
}

h1 {
  font-size 24px;
}

Cheat sheet of common selectors

headselects the element with the head tag

.redselects all elements with the ‘red’ class

#navselects the elements with the ‘nav’ Id

div.rowselects all elements with the div tag and the ‘row’ class

[aria-hidden="true"]selects all elements with the aria-hidden attribute with a value of “true”

*Wildcard selector. Selects all DOM elements. See bellow for using it with other selectors

We can combine selectors in interesting ways

Some examples:

li aDOM descendant combinator. All a tags that are a child of li tags

div.row *selects all elements that are descendant (or child) of the elements with div tag and ‘row’ class

li > aDifference combinator. Select direct descendants, instead of all descendants like the descendant selectors

li + aThe adjacent combinator. It selects the element that is immediately preceded by the former element. In this case, only the first a after each li.

li, aSelects all a elements and all li elements.

li ~ aThe sibling combinator. Selects a element following a li element.

Pseudo-selectors or pseudo structural classes

These are also useful for selecting structural elements from the DOM.

Here are some of them:

:first-childTarget the first element immediately inside (or child of) another element

:last-childTarget the last element immediately inside (or child of) another element

:nth-child()Target the nth element immediately inside (or child of) another element. Admits integers, even, odd, or formulas

a:not(.name)Selects all a elements that are not of the .name class

::afterAllows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads after HTML elements.

::beforeAllows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads before HTML elements.

We can use pseudo-classes to define a special state of an element of the DOM. But they don’t point to an element by themselves .

Some examples:

:hoverselects an element that is being hovered by a mouse pointer

:focusselects an element receiving focus from the keyboard or programattially

:activeselects an element being clicked by a mouse pointer

:linkselects all links that have not been clicked yet

:visitedselects a link that has already been clicked

More info on the nth-child selector

The nth-child selector is a css psuedo-class taking a pattern by which to match one or more elements relative to their position amongst siblings.

Syntax

  a:nth-child(pattern) {
    /* Css goes here */
  }

Pattern

The patterns accepted by nth-child can come in the form of keywords or an equation of the form An+B.

Keywords

Odd

Odd returns all odd elements of a given type.

  a:nth-childe(odd) {
    /* CSS goes here */
  }
Even

Even returns all even elements of a given type.

  a:nth-childe(even) {
    /* CSS goes here */
  }

An+B

Returns all elements matching the equation An+B for every positive integer value of n (in addition to 0).

For example, the following will match every 3rd anchor element:

  a:nth-childe(3n) {
    /* CSS goes here */
  }

Games

CSS Diner is a web game that teaches almost everything there is to know about combining selectors.

Additional references

There are many more CSS selectors! Learn about them at CodeTuts, CSS-tricks.com, or at Mozilla Developer Network.