Selectors and Specificity

The user's 20px wins. Marking a declaration !important moves it into the important band, where the normal origin order is inverted: important user-agent beats important user, which beats important author. A site cannot override a user's important declaration.

Wrapping base selectors in :where() drops them to zero specificity, so any consumer declaration — even a single type selector — overrides them without escalation or !important. The cost is that the library can never win a conflict, including against a consumer's accident.

For !important author declarations the layer order is reversed: the earliest-declared layer wins, and important unlayered declarations become the weakest of all. So !important inside a reset layer beats !important in a later layer.

Write @import url("vendor.css") layer(vendor); which places every rule from that file into the vendor layer. The @import must come before all other rules except @charset and @layer ordering statements, so it sits at the very top of the stylesheet.

:invalid reflects constraint-validation state continuously, so an empty required field is invalid from the moment it is parsed — before anyone types. Use :user-invalid, which matches only after the user has interacted with the field or attempted submission.

Generated content is a rendering instruction, not document text: it cannot be selected, copied or found with in-page search, translation tools skip it, and how assistive technology announces it varies by engine. Keep it decorative and put meaningful copy in the document.

The key selector is the rightmost compound, here the a. Browsers test candidate elements against it first and only then walk up the ancestor chain, so a broad rightmost compound with a long chain to its left forces the most ancestor walking.

Animation declarations sit above all normal declarations but below every important one, so an !important rule freezes an animated property. Transition declarations sit at the very top of the cascade, above even important declarations, for as long as the transition is running.

:is() and :where() take forgiving selector lists: an unparseable argument is dropped and the rest of the selector still applies. In an ordinary comma-separated selector list, one invalid selector invalidates the entire rule, declarations included.

Because each pseudo-element specification defines its own restricted property set. ::selection only paints over existing text, so it accepts colour, background-color, text-decoration and text-shadow; ::marker accepts font properties, colour and content. Neither generates a box you can size.

It matches every direct child of .stack that has a preceding element sibling — in other words, every child except the first. Applying margin-top there spaces the children apart without leaving a stray margin above the first one or below the last.

all sets every property to one global keyword: initial gives the specification's blank slate (display becomes inline), unset lets inherited properties come from the host page, and revert restores user-agent styles. all skips direction, unicode-bidi and custom properties, and applies to one element only.

Native nesting is not a drop-in Sass replacement: & is a real selector with :is()-like specificity rather than text concatenation, so overrides can silently change winner and BEM suffix rules are dropped as invalid.