CSS Selectors
CSS selectors decide which elements a rule applies to — by tag name, class, ID, attribute, state or position in the document. Here are all 20 selectors, each with the elements it matches and a live, editable example.
| Name | Description |
|---|---|
| + | The adjacent sibling combinator selects the element immediately following another, sharing the same parent. |
| ::after | Inserts generated content as the last child of an element, via the content property. A pseudo-element. |
| [attribute] | Selects elements by the presence or value of an attribute — [type="email"], [href^="https"] and more. |
| ::before | Inserts generated content as the first child of an element, via the content property. A pseudo-element. |
| :checked | Styles a checkbox, radio button or option when it is checked. The basis of many CSS-only toggles. |
| > | The child combinator selects elements that are direct children of another, not deeper descendants. |
| .class | Selects every element carrying a given class attribute. The everyday workhorse of CSS, written with a leading dot. |
| :disabled | Styles form controls that are disabled, so they clearly read as unavailable. |
| :first-child | Selects an element that is the first child of its parent. Handy for trimming the leading margin of a group. |
| :focus | Styles the element that currently has keyboard focus. Essential for accessible, keyboard-friendly interfaces. |
| ~ | The general sibling combinator selects every matching sibling that follows an element, not just the next one. |
| :has() | Selects an element that contains something matching the selector inside it — the long-awaited "parent selector". |
| :hover | Styles an element while the user's pointer is over it. The basis of hover effects on links, buttons and cards. |
| #id | Selects the single element with a given id attribute, written with a leading hash. High specificity; use sparingly. |
| :last-child | Selects an element that is the last child of its parent. Often used to drop the trailing border of a list. |
| :not() | Selects elements that do NOT match the selector inside it — a negation that trims exceptions out of a rule. |
| :nth-child() | Selects elements by their position among siblings — odd, even, or an an+b formula like 3n. |
| ::placeholder | Styles the placeholder text shown inside an empty input or textarea. |
| :root | Selects the document root element (the <html> element), the standard place to declare global custom properties. |
| * | The universal selector matches every element. Most often seen in the box-sizing reset at the top of a stylesheet. |