CSS References
CSS Selectors Reference
Selectors are the patterns CSS uses to target which HTML elements a rule applies to. This reference lists every common selector — from the humble type and class selectors to attribute matchers, combinators and grouping — with a concrete example and a plain-English description. Mastering selectors is the fastest way to write precise, maintainable stylesheets.
Basic selectors
These are the selectors you use in almost every rule: match by tag name, class, id, or everything.
| Selector | Example | Description |
|---|---|---|
| * | * { } | Universal selector — matches every element. |
| element | p { } | Type selector — matches all <p> elements. |
| .class | .card { } | Class selector — matches elements with class="card". |
| #id | #main { } | ID selector — matches the element with id="main". |
| A, B | h1, h2 { } | Grouping — applies the rule to both h1 and h2. |
| A.class | a.button { } | Type plus class — <a> elements with class button. |
| element.classA.classB | p.lead.dark { } | Element with both classes. |
Attribute selectors
Attribute selectors match elements based on the presence or value of an HTML attribute.
| Selector | Example | Description |
|---|---|---|
| [attr] | [disabled] { } | Has the attribute, any value. |
| [attr="value"] | [type="text"] { } | Attribute equals an exact value. |
| [attr~="value"] | [class~="tag"] { } | Attribute is a space-separated list containing value. |
| [attr|="value"] | [lang|="en"] { } | Value equals or starts with value followed by a hyphen. |
| [attr^="value"] | [href^="https"] { } | Attribute value starts with value. |
| [attr$="value"] | [href$=".pdf"] { } | Attribute value ends with value. |
| [attr*="value"] | [href*="blog"] { } | Attribute value contains value anywhere. |
| [attr="v" i] | [type="TEXT" i] { } | Case-insensitive match with the i flag. |
Combinator selectors
| Selector | Example | Description |
|---|---|---|
| A B | article p { } | Descendant — any <p> inside an <article>. |
| A > B | ul > li { } | Child — <li> that is a direct child of <ul>. |
| A + B | h2 + p { } | Adjacent sibling — the <p> right after an <h2>. |
| A ~ B | h2 ~ p { } | General sibling — all <p> after an <h2>, same parent. |
Pseudo-class and pseudo-element selectors
| Selector | Example | Description |
|---|---|---|
| :hover | a:hover { } | Matches an element the pointer is over. |
| :focus | input:focus { } | Matches a focused form control. |
| :first-child | li:first-child { } | First child of its parent. |
| :last-child | li:last-child { } | Last child of its parent. |
| :nth-child(n) | li:nth-child(2) { } | Matches by position, e.g. even, odd, 3n. |
| :not(x) | p:not(.lead) { } | Matches elements that do not match x. |
| :checked | input:checked { } | A checked checkbox or radio. |
| ::before | p::before { } | Inserts generated content before an element. |
| ::after | p::after { } | Inserts generated content after an element. |
| ::first-line | p::first-line { } | Styles the first line of a block. |
See the dedicated Pseudo-classes and Pseudo-elements reference pages for the full lists of these powerful selectors.
Specificity: which selector wins
When two rules target the same element, the one with higher specificity applies. Specificity is counted as inline styles, then IDs, then classes/attributes/pseudo-classes, then type/pseudo-element selectors.
| Selector type | Weight (a, b, c) | Example |
|---|---|---|
| Inline style | 1, 0, 0, 0 | style="color:red" |
| ID | 0, 1, 0, 0 | #main |
| Class / attribute / pseudo-class | 0, 0, 1, 0 | .card, [type], :hover |
| Type / pseudo-element | 0, 0, 0, 1 | p, ::before |
| Universal * | 0, 0, 0, 0 | * adds nothing to specificity |
Avoid !important and heavy ID chains to win specificity battles — they make stylesheets hard to override. Prefer simple, well-organised class selectors.