Pseudo-classes and pseudo-elements

Pseudo-classes and pseudo-elements

Pseudo-classes such as hover, focus-visible, checked and nth-child select elements in a state or position. Pseudo-elements such as before and after create decorative generated boxes. Do not put essential content only in generated content.

Try it yourself

Change the example, run it, and explain the result in your own words. Then create one variation of your own.

Key idea

Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.