Gosub selectors & pseudo-elements test

Structural pseudo-classes, combinators, attribute selectors, generated content, interactive states, and typographic pseudo-elements.

Structural: :first/last-child, :nth-child

Item 1 (first — green)
Item 2 (outlined, :nth-child(2))
Item 3 (3n — purple)
Item 4
Item 5
Item 6 (3n — purple)
Item 7 (last — red)

:nth-child(odd) tints alternate rows; :nth-child(3n) recolors every third.

:not()

Highlighted (blue)
Skipped via :not(.skip)
Highlighted (blue)
Skipped

Combinators

Direct child (>) — tinted

Descendant (italic)

Element A

Adjacent sibling of A (+) — red

General sibling of A (~) — green

Another general sibling — green

Attribute selectors + generated content

Secure link — gets a lock via [href^="https"]

Report — gets a (pdf) tag via [href$=".pdf"]

Opens in new tab — dotted underline

Active / Off — styled by data-state

::before / ::after

Interactive states (hover / focus / active / checked)

Check me — label bolds via :checked + label

Hover this link

::first-line / ::first-letter

The first line of this paragraph is bold and blue, and the very first letter is enlarged as a floated drop-cap. Resize the window to confirm that ::first-line tracks the actual rendered first line rather than the source markup. Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do eiusmod.

::selection

Select this text with your cursor — the highlight should be purple-on-white via ::selection.