selectors-cascade — 100.00% verified visual parity

@media print { } applies in the print rendering context, turning the box green; ignoring print media queries leaves it gray.

@supports (display:block) { } gates a green override that a correct engine applies; engines without @supports parsing drop it and leave the box gray. Aspirational known-gap.

[data-id="yes" i] case-insensitive flag colors YES and Yes green; a different value stays gray.

[data-pick="yes"] colors only the box whose attribute equals the value; boxes with a different value or no attribute stay gray.

[lang|="en"] hyphen match colors boxes whose value is en or begins with en-; the value english stays gray.

Two chained attribute selectors [data-a="1"][data-b="2"] require BOTH to match on the same box; only the box with both attributes turns green.

[data-id^="abc"] prefix match colors boxes whose value starts with abc; a value containing but not starting with abc stays gray.

[data-pick] presence selector matches any box carrying the attribute regardless of value; two boxes turn green, the bare box stays gray.

[data-id*="mid"] substring match colors boxes whose value contains mid anywhere; an unrelated value stays gray.

[data-id$="png"] suffix match colors boxes whose value ends with png; a value starting with png stays gray.

[data-tags~="hot"] whitespace-list match colors boxes where hot is a full space-separated word; a substring like hotter stays gray.

The all shorthand participates at its declaration position: an earlier background is reset by all:initial while a later background remains applied.

A higher-specificity winning width using a missing custom property becomes unset at computed-value time; it must not reveal a 150px width already applied from a lower rule.

A winning width using a missing custom property becomes unset at computed-value time; it must not reveal the lower cascaded 150px declaration.

opacity:revert rolls back the earlier author opacity and exposes the CSS-defined initial opacity of 1 without consulting an HTML UA rule.

all:initial resets earlier padding before later declarations rebuild the box; catches treating all as a no-op or failing to reset box properties.

A class !important rule placed BEFORE a normal id rule must override the higher-specificity id declaration; only the .winner box turns green.

A class rule with !important overrides an id selector that would otherwise win on specificity; only the !important box turns green.

background: inherit forces a non-inherited property to copy the parent .wrap green; the box renders green.

An inherited green background painted on the parent .wrap shows through a transparent child box.

background: initial resets the box background to its initial transparent value, revealing the green .wrap behind it.

An inline style attribute outranks any selector (id rule), so only the inline-styled box turns green.

A thick border on the parent .outer does NOT inherit to the child box, which keeps its own 2px border (child filled green for unambiguous geometry).

Two equal-specificity rules target the same element; the later declaration wins, so the box renders green not gray.

background: unset on a non-inherited property behaves like initial (transparent), revealing the green .wrap behind the box.

@layer reset, base, theme gives the later-declared theme layer priority over a later source-order base rule; catches source-order-only cascade or dropped layer at-rules.

The adjacent-sibling combinator (+) matches only the box immediately following .marker; the marker and the third box stay gray.

The child combinator (>) matches only immediate children of #parent; a nested .box stays gray while direct-child boxes turn green.

The descendant combinator (space) matches every .box inside #parent at any depth; a .box outside #parent stays gray.

The general-sibling combinator (~) matches every later .box sibling of .marker, not just the next one; the marker stays gray.

:defined matches built-in HTML elements, turning the div green; catches missing Selectors Level 4 defined pseudo-class support.

:dir(rtl) matches an element with static dir=rtl; catches missing direction pseudo-class support.

:empty colors boxes with no children green; a box containing text stays gray.

:first-child paints the first box green and :last-child paints the last box blue; the middle box stays gray.

p:first-of-type colors the first <p> green even though a <div> precedes it.

:has(+ .flag) colors a box that is immediately followed by a .flag sibling green.

:is(.a, .c) colors boxes carrying class a OR c green; the .b box stays gray.

:lang(en) matches an element inheriting the document language from html lang=en; catches checking only the element's own lang attribute.

p:last-of-type colors the last <p> green; a trailing <div> does not affect it.

:not(.a, .b) with a selector list colors every box except those carrying class a OR b.

:not(.skip) colors every .box except the one carrying .skip; the skipped box stays gray.

:nth-child(even) colors the 2nd and 4th of four boxes green.

:nth-child(3n+1) colors the 1st and 4th of five boxes green; the others stay gray.

:nth-child(odd) colors the 1st, 3rd and 5th of five boxes green; even-position boxes stay gray.

:nth-last-child(2) colors the box that is 2nd from the end green (3rd of four).

:nth-last-of-type(2) counts from the end among same element names, ignoring the intervening div; catches using nth-last-child or forward nth-of-type semantics.

p:nth-of-type(2) colors the 2nd <p> among mixed div/p siblings green.

:only-child colors a box green only when it is the sole child of its panel; a box with a sibling stays gray.

p:only-of-type colors the sole <p> among <div> siblings green.

:root paints the page background green behind a centered white bordered panel; if :root is unmatched the page stays white.

:scope in a stylesheet matches the document scope root so :scope body .box turns the box green; catches unsupported :scope selector matching.

:where() contributes zero specificity, so a later (0,1,0) class rule wins over an earlier :where(.box) rule; the box renders green.

:has(.flag) matches a descendant witness nested below the card; catches :has implementations limited to sibling or child relative selectors.

@supports selector(), child :has(> .flag), and :nth-child(2 of .flagged) make the intended boxes green; catches sibling-only :has and nth-child without the of-selector clause.

A class selector (0,1,0) overrides a type selector (0,0,1) regardless of source order; only the .pick box turns green.

An id rule (1,0,0) placed BEFORE a class rule (0,1,0) in source order must still win on specificity; only the #pick box turns green (regression guard against pure source-order cascade).

An id selector (1,0,0) overrides a more numerous class selector (0,2,0) on the same element; only the box carrying the id turns green.

@supports boolean logic with and/not selects the green branch; catches parsers that handle only a single simple feature query.

A type selector p.box colors only <p> boxes green; <div> boxes stay gray.

The universal selector * as the discriminating rule paints every child box green.