Lesson 16 · Motion and scale

Pseudo-classes and pseudo-elements

Some things a selector needs to know are not written in the tags: which item comes first, or which one the mouse is on. A pseudo-class (one colon, like :first-child or :hover) picks whole elements by that kind of fact. A pseudo-element (two colons, like ::before) names a part of an element, or a new box CSS adds to it. Watch three rules style one shopping list, and see that the ::before boxes are drawn but never join the DOM.

10 min10 steps5 questionsAdvanced

Fig 16 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01Which of these is a pseudo-element?

Two colons mark a pseudo-element. ::before names a new box before the element's content. :hover and :first-child are pseudo-classes, and .done is a class selector.

02A list has three li items: Tea, Milk and Bread. Which items does li:first-child match?

The browser counts each li's place among its parent's children. Only Tea is child number 1.

03With li:hover { color: tomato; }, when is Milk tomato?

A pseudo-class like :hover matches while the state holds. Move the pointer away and the rule stops matching, so the colour goes back.

04The rule li::before { content: "✓ "; } styles three li items. How many li elements are in the DOM afterwards?

::before boxes are drawn, but they are not elements. The DOM still holds the same three li elements.

05What is the specificity of li::before?

A pseudo-element counts like a type selector, in the last column. li is one type selector and ::before adds one more: (0,0,2). li:hover is (0,1,1), because a pseudo-class counts like a class.

Key terms

Glossary

Pseudo-class: A keyword after one colon, such as :hover or :first-child. It picks whole elements by a fact the tags do not spell out, like their place or the user's action.
Pseudo-element: A keyword after two colons, such as ::before or ::marker. It names a part of an element, or a new box CSS adds to it.
:first-child: Matches an element that is the first child of its parent. Same as :nth-child(1).
:hover: Matches an element while a pointer, such as a mouse, is over it (or over one of its children).
::before: A new box made as the first child of the element, before its own content. It exists only when the content property is set.
content: The property that fills a ::before or ::after box, for example content: "✓ ".
DOM: The Document Object Model: the browser's tree of elements, built from the HTML tags.
Specificity: A score (ids, classes and pseudo-classes, types and pseudo-elements) the browser uses to pick a winner when rules disagree.

Fine print

Notes and sources

A real browser works out every rule at once. The figure brings in one rule at a time so you can see what each one does. The page drawing is enlarged.
The bullet is a pseudo-element too, ::marker. By default it sits outside the li's content, so the ::before box comes after the bullet and before the words.
Touchscreens have no pointer resting over an item, so :hover may never match there, or match only for a moment after a tap. Do not hide anything important behind :hover.
CSS Selectors Level 3 brought in the two-colon form. For :before, :after, :first-line and :first-letter, which came from CSS 1 and 2, browsers must still accept one colon.
::before and ::after make a box only when content is set to something other than none or normal. A rule like li::before { color: red; } alone draws nothing.
Save the full page as index.html and the three rules as style.css in the same folder, open index.html, and move the mouse over the list: the item under it turns tomato.

Quiz Unlocks after the last step.