Selectors: :has(), Pseudo-classes & Pseudo-elements
18 min read
:has():nth-child:not():is():where()::before::after:focus-visiblePseudo-classesPseudo-elements
Advanced CSS Selectors
The :has() Revolution
:has() is the "parent selector" CSS developers waited 20 years for. It selects an element based on what it contains.
Pseudo-classes vs Pseudo-elements
| Type | Syntax | What It Does | Examples |
|---|---|---|---|
| Pseudo-class | Single colon : | Selects elements in a specific state | :hover, :focus, :nth-child() |
| Pseudo-element | Double colon :: | Creates a virtual element | ::before, ::after, ::placeholder |
Key Pseudo-classes
| Selector | Selects |
|---|---|
:nth-child(2n) | Every even child |
:nth-child(3n+1) | Every 3rd, starting from 1st |
:nth-of-type(2) | 2nd element of its type |
:not(.active) | Elements WITHOUT .active class |
:focus-visible | Focused by keyboard (not mouse) |
:focus-within | Parent when any child is focused |
:empty | Elements with no children/text |
:checked | Checked checkboxes/radios |
:disabled | Disabled form elements |
:placeholder-shown | Inputs showing placeholder text |
Key Pseudo-elements
| Selector | Creates |
|---|---|
::before | Virtual element before content |
::after | Virtual element after content |
::placeholder | Styles input placeholder text |
::selection | Styles highlighted/selected text |
::marker | Styles list item bullets/numbers |
::first-line | Styles first line of text |
::first-letter | Styles first letter (drop caps) |