CSS selectors, pseudo-classes and specificity

Type selector matches all p elements. [1][5]

Matches element with the ID value menu. [1][5]

Finds all elements with class token card. [1][5]

Matches elements carrying both class tokens. [1][5]

Matches only button elements also having primary class. [1][5]

The universal selector matches every element in scope. [1][5]

Comma-separated selector list matches either heading type. [1][5]

A descendant with class item under the menu element. [1][5]

Selects direct a children of nav, not deeper nested links. [1][5]

Selects a links at any descendant depth inside article. [1][5]

A paragraph immediately after an h2 sharing the same parent. [1][5]

Any subsequent p sibling after an h2 in the same parent. [1][5]

Matches direct items of unordered lists only. [1][5]

The anchor must be a direct child of card. [1][5]

Matches either heading using the matches-any pseudo-class. [1][5]

Matches links bearing a download attribute, regardless of value. [2][1]

Matches inputs with that exact type value. [2][1]

Selects links whose href starts with HTTPS scheme text. [2][1]

Selects URLs ending in lowercase .pdf, including query-string caveats. [2][1]

Finds links whose href contains the literal substring. [2][1]

Matches a whitespace-separated token in attribute value. [2][1]

Matches en or an en- prefixed language tag. [2][1]

Matches ASCII-case-insensitive attribute values. [2][1]

Excludes buttons disabled by the HTML disabled state. [2][1]

Matches checked inputs or focused input. [2][1]

Matches descendants but :where() contributes zero specificity. [2][1]

Selects card elements containing a descendant img. [2][1]

Matches forms containing invalid input elements. [2][1]

Matches sections with a direct h2 child. [2][1]

Filters to cards without nested class. [2][1]

List item must be the first element child in its parent. [1][3]

List item must be the last element child. [1][3]

Matches an li that is exactly second among all element siblings. [1][3]

Selects li at odd sibling positions. [1][3]

Selects li at even sibling positions. [1][3]

First p among p siblings even if not first child. [1][3]

Last p among elements of type p in that parent. [1][3]

Matches a notice when it has no element siblings. [1][3]

No element or text nodes; whitespace text counts as content. [1][3]

Match the focused input element. [1][3]

Focus indication for input modality and browser heuristics. [1][3]

Matches a link while pointer is over it. [1][3]

Checked checkbox or radio input. [1][3]

Form input marked as required. [1][3]

Built-in constraint validation says current input is invalid. [1][3]

Matches buttons disabled through HTML semantics. [1][3]

Matches the document root element in a normal HTML document. [1][3]

One type selector contributes one element unit. [3][4]

Each class contributes to the middle specificity column. [3][4]

A single ID outweighs any number of class selectors. [3][4]

One type and two class/pseudo-class units. [3][4]

Combinators themselves do not add specificity. [3][4]

Its argument weight is deliberately ignored. [3][4]

It uses maximum specificity among listed selectors. [3][4]

The not pseudo-class itself adds none, its argument does. [3][4]

Include card class plus the selected argument's type. [3][4]

Source order is the final tie-break after earlier cascade stages. [3][4]

Cascade origin, importance and layer are evaluated before specificity. [3][4]

A later layer may beat an earlier layer, but unlayered normal wins over all normal layers. [3][4]

Importance reverses layer precedence compared with normal declarations. [3][4]

Repeating fake IDs to force priority creates hard-to-maintain styles. [3][4]