Simple selectors

Type selector

Selects elements by tag name.

All div elements have font color set to white.

Class selector

Selects elements by class (dot sign before class name).

All elements with class="content" (second div and article) have font color set to white.

Note: elements can have multiple classes separated with a space (e.g. <div class="content intro"></div>) but it's enough to include just one of them in a class selector (e.g. .content).

Id selector

Selects element by id (hashtag before id name).

The element with id="header" (first div) has font color set to white.

Important! A specific id name can only belong to one element on a page (e.g. there can be just one element with id="header") otherwise CSS rules attached to it won't work. For formatting multiple elements you want to use a class selector.

Attribute selector

Selects elements by an attribute-value pair (written inside square brackets).

All elements with type="email" (first input) has font color set to white.

Universal selector

Selects all elements of the page.

All elements have font color set to white.

Combined selectors

Compound selector

Combine together multiple simple selectors (of any type) which point to the same elements (should be avoided in real code!):

All div elements with class="content" (second and third div) have font color set to white.

Descendant selector

Selects elements nested (no matter how deep) into other elements using multiple simple selectors (of any type) separated with a space:

All p elements nested into other elements with class="content" (all four p elements in this case) have font color set to white.

Child selector

Selects child elements nested one level deep into parent (container) elements using multiple simple selectors (of any type) separated with a “bigger than" (>) sign:

All p elements nested one level deep into elements with class="content" (only the first and third p) have font color set to white.

General sibling selector

Selects all sibling elements of an element using multiple simple selectors (of any type) separated with a tilde (~) sign.

All div elements which are siblings of the element with id="first-section" (first, third and fourth div) have font color set to white.

Adjacent sibling selector

Selects all adjacent sibling elements of an element using multiple simple selectors (of any type) separated with a plus (+) sign.

All div elements which are adjacent siblings of the element with id="first-section" (only first and third div) have font color set to white.

Selector list

Combine together multiple simple selectors (of any type) which point to the same elements (should be avoided in real code!):

All elements with class="header" and class="footer" (first and last div) have font color set to white.

Pseudo classes

:active

Selects elements which are currently in active state (when clicked).

All a elements in active state have font color set to white.

:hover

Selects elements which are currently in hovered state (cursor is on the element).

All a elements in hovered state have font color set to white.

:visited

Selects elements (links) which are currently in visited state (already clicked, after active state).

All a elements in visited state have font color set to white.

:checked

Selects elements (checkbox or radio inputs) which are currently in checked state.

The checkbox element with name="terms-of-service" will disappear when it's in checked state.

:first-child

Selects first child element of a parent (container) element.

The element nested first into body element (first div) has font color set to white.

:last-child

Selects last child element of a parent (container) element.

The element nested last into body element (last div) has font color set to white.

:nth-child()

Selects nth (condition provided in parantheses) child element(s) of a parent (container) element.

The element nested as second into body element (second div) has font color set to white.

The elements nested as even nth into body element (second and fourth div) have font color set to white.

The elements nested as odd nth into body element (first and third div) have font color set to white.

More options, explanations about :nth-child() on Mozilla Developer Network (MDN).

:nth-last-child()

Selects nth (condition provided in parantheses) child element(s) of a parent (container) element but counting from the end. Has the same conditions as :nth-child().

The element nested as second last into body element (third div in this case) has font color set to white.

:first-of-type

Selects first element which matches a simple selector (of any type).

The first element with class="content" has font color set to white.

:last-of-type

Selects last element which matches a simple selector (of any type).

The last element with class="content" has font color set to white.

:nth-of-type()

Selects nth (condition provided in parantheses) element(s) which matches a simple selector (of any type). Has the same conditions as :nth-child().

The second element with class="content" has font color set to white.

:nth-last-of-type()

Selects nth (condition provided in parantheses) element(s) which matches a simple selector (of any type) but counting from the end. Has the same conditions as :nth-child().

The second last element with class="content" has font color set to white.

:not

Selects elements which don't match a simple selector (of any type).

All div elements without class="content" (first and last div) have font color set to white.

:root

Selects the root (html) element of the page.

The html element has font-size set to 15px (which can be used as base for rem units).

Pseudo elements

::after

Creates a new “pseudo element" after elements.

A new “pseudo element" with the content " - John Doe" and font color set to white is created after each p element.

::before

Creates a new “pseudo element" before elements.

A new “pseudo element" - with the content A wise man's advice: and font color set to white - is created before each p element.

::first-letter

Selects the first letter of text content inside elements.

First letter of text content inside p element(s) (L in this case) will have font color set to white.

::first-line

Selects the first line of text content inside elements (first line refers to text inside an element displayed by browser before the first line break).

First line of text content inside p element(s) will have font color set to white.

::placeholder

Selects placeholder text of input elements (displayed when field is empty).

Placeholder text of all input elements will have font color set to white.