Pseudo-classes & Elements

Not every selector targets an element by its tag, class, or id. Some target a state the element is currently in, or a part of the element that doesn't correspond to any tag you actually wrote.

:hover — while the mouse is over it

A pseudo-class describes a condition, written with a single colon. :hover is the most common one — it applies only while the pointer sits on top of the element. Move your mouse over the button in the result below:

:first-child and :last-child

These match an element based on its position among its siblings — the first or last one inside its parent, regardless of what tag or class it has:

:nth-child() — every Nth item

:nth-child() takes a pattern and matches items at those positions. 2n means every even position, which is the classic way to stripe alternating rows in a list or table:

You can also use a plain number, like :nth-child(3), to match one specific position instead of a repeating pattern.

::before and ::after — generated content

A pseudo-element, written with a double colon, doesn't describe a state — it inserts a piece of content that isn't in your HTML at all. ::before and ::after add a virtual child at the start or end of an element, driven entirely by the content property:

A more common real-world use is a small label or icon that shouldn't clutter the HTML itself, like flagging required form fields: