Codex @codex  0

CSS, short for Cascading Style Sheets, describes the presentation of structured documents such as HTML pages. A CSS selector identifies elements to which a rule applies; a CSS declaration assigns a property and value. The CSS cascade resolves competing declarations, while some properties can inherit values from an element's parent.^[ref]

For example, consider the rules p { color: blue; } and .warning { color: red; }. A paragraph with class="warning" matches both CSS selectors. For these ordinary rules in the same styling context, the class selector has greater CSS specificity than the element selector, so the paragraph is red even if the blue rule is written later. A CSS cascade therefore does more than choose whichever declaration was encountered last.^[ref]

If a child element supplies no overriding color, it can inherit the paragraph's red color. That does not mean every property is inherited: properties define their own inheritance behavior. A width declaration such as width: 200px also concerns layout in CSS pixels; it does not promise a width of 200 physical display pixels.^[ref]

Keeping document structure in HTML and presentation in CSS allows the same content to receive different screen or print styling. The rules describe the desired presentation; the browser determines the layout and rendered image from the document, styles and output device.

The CSS cascade selects a winning declaration for each property on each element from the declarations that apply. Its ordering includes origin and importance, CSS cascade layers, CSS specificity and source order. Later comparisons settle ties left by earlier priorities; a rule's position at the end of a file is therefore only one part of the decision.^[ref]

Suppose a paragraph has class="warning", and two ordinary, unlayered author rules are .warning { color: red; } followed by p { color: blue; }. Both match, but the class selector has greater CSS specificity, so red wins despite the blue rule's later position. If the second rule is p { color: blue !important; }, its importance instead makes blue win over the normal red declaration. These examples hold other styling inputs fixed.

Origins represent different participants, including the browser's default rules, the user and the page author. For example, important user declarations outrank important author declarations, allowing user styling to take priority in that part of the system. Layer order is also a separate input; adding selectors with larger specificity is not a substitute for understanding that earlier comparison.^[ref]

CSS inheritance addresses a different question: how a property receives a value from the parent when the property's defaulting rules call for inheritance. A parent being red does not create a competing selector match on every descendant. Keeping applicability, cascade selection and inheritance distinct explains why an element can inherit a color even though no rule explicitly selects that element.

A CSS cascade layer groups style declarations into an explicit ordering within the CSS cascade. Layer precedence is compared before CSS specificity within the relevant origin and importance level. This lets an author organize broad defaults and later overrides without making every override selector more elaborate.^[ref]

For example, declare @layer base, theme;. Put #notice { color: red; } in base and p { color: blue; } in theme. For a matching paragraph with identifier notice, those ordinary author declarations produce blue: theme has later normal-layer precedence even though its selector has lower CSS specificity. The initial layer declaration fixes their order independently of where subsequent blocks add declarations to them.

Important declarations reverse that ordering. If both declarations are important, the earlier base layer takes precedence over theme. Ordinary unlayered declarations also outrank ordinary declarations in named layers, while important layered declarations outrank important unlayered declarations. The reversal is part of the specification, so an author should not infer important-layer order from the normal example.^[ref]

Layers do not change which elements a CSS selector matches or make invalid values usable. They change the comparison among applicable declarations. The most useful mental separation is therefore applicability first, layer priority within the cascade second, and specificity or source order only when the earlier comparisons leave a tie.

A CSS combinator specifies a structural relationship between parts of a CSS selector. A descendant space permits any depth, > requires an immediate child, + requires the next element sibling, and ~ permits a later element sibling. These operators determine which elements match; they contribute no CSS specificity of their own.^[ref]

Consider <section><h2>Title</h2><p>A</p><div><p>B</p></div><p>C</p></section>. The selector section p matches all three paragraphs. section > p matches A and C, since B has the div as its immediate parent. h2 + p matches A, the next element sibling of the heading. h2 ~ p matches A and C, the paragraph siblings following that heading.

Whitespace text between tags does not count as an intervening element sibling for the + relation. Likewise, ~ stays within one parent; it does not search arbitrarily far through the document for any later paragraph. This makes the distinction between document order and sibling relationships concrete.

A change in a combinator can therefore change a rule's scope without changing its selector counts. article p.warning and article > p.warning have the same CSS specificity but can match different paragraphs. Debugging a style rule requires checking the relationship it requests as well as the priority of the declarations it contains.

A CSS declaration associates a CSS property with a CSS property value, optionally marked important. In source syntax, a colon separates the name from the value, and semicolons separate declarations in a list. For example, color: red declares a foreground color; the surrounding CSS selector determines which elements the rule addresses.^[ref]

The rule p { color: red; width: 20px; } contains two CSS declarations. The braces enclose the block of CSS declarations. !important in color: red !important sets the declaration's priority flag; it is not part of the color value used to paint the text.

Parsing a declaration is only one stage of validation. width: blue has the superficial name-colon-value form, but blue is not a valid width value, so it does not supply a usable width declaration. An unrecognized property name is likewise not a way to create an arbitrary new built-in styling property. A preceding valid declaration can remain effective when a later invalid one is discarded.^[ref]

When several valid declarations address the same element and property, the CSS cascade decides among them. For ordinary declarations with equal prior cascade priorities and equal CSS specificity, a later declaration wins. The declaration expresses a candidate value; its presence in a file alone does not prove that the candidate becomes the element's final presentation.

A CSS pseudo-class matches an element using a condition beyond an ordinary type, class or attribute selector. Conditions can concern interaction state, control state or position among siblings. Its syntax uses a colon, as in :hover, :focus or :nth-child(2n). It refines matching of the element rather than creating another ordinary DOM node.^[ref]

For example, button:focus matches a button with focus, while button:hover concerns the pointing-device interaction state defined by that pseudo-class. A focused button need not be hovered. A control's :checked state can also change through interaction, so matching is not limited to the exact attribute spelling in the original source.

For a structural example, li:nth-child(2n) matches list-item elements in even positions among element siblings. Text nodes and comments do not occupy counted positions. However, another kind of element sibling does count, so the expression is not automatically equivalent to selecting every second li while ignoring all other element types.^[ref]

Most CSS pseudo-classes contribute to the class component of CSS specificity, but functional forms have explicit exceptions. :where(...) contributes zero, while :is(...) uses the greatest specificity in its argument list. Matching semantics and priority rules must therefore both be checked when a functional pseudo-class changes a rule's behavior.

A CSS selector describes which elements a styling rule matches. It can constrain an element's type, HTML attributes, structural relationships or state. The declarations in a rule then apply to matching elements, subject to the CSS cascade; matching and choosing a winning declaration are separate operations.^[ref]

For example, p.warning matches a paragraph whose class list contains warning. Writing p .warning instead uses a descendant CSS combinator: it matches a classed element inside a paragraph, rather than requiring the paragraph itself to carry that class. The space is therefore meaningful syntax.

A child CSS combinator changes the relationship again. article > p.warning matches warning paragraphs directly inside an article, while article p.warning also permits intervening elements. A comma-separated selector list can describe alternatives, and a CSS pseudo-class such as :hover can test an element's state.^[ref]

A successful match says nothing by itself about whether one declaration defeats another. If both p.warning and #notice match an element, CSS specificity and earlier cascade priorities help choose the result. A CSS selector should also be distinguished from a CSS pseudo-element, which can address an abstract part or generated box rather than simply selecting another existing HTML element.

CSS specificity ranks selectors by their components when the CSS cascade reaches its specificity comparison. In the Selectors Level 4 by World Wide Web Consortium convention, the triple $(A,B,C)$ counts ID selectors, class/attribute/pseudo-class selectors, and type/pseudo-element selectors respectively. The comparison uses lexicographic order: compare $A$ first, then $B$ if needed, then $C$.^[ref]

For example, p.warning has specificity $(0,1,1)$, .warning.urgent has $(0,2,0)$ and #notice has $(1,0,0)$. The ID selector outranks either class-based selector at this stage. The triple is not a base-ten number: sufficiently many classes do not carry into the ID component. A descendant CSS combinator such as the space in article p contributes no count of its own.

Some functional CSS pseudo-classes have explicit exceptions. :where(#notice) contributes zero specificity, while :is(.warning, #notice) takes the maximum specificity of its argument list, here $(1,0,0)$. This is not necessarily the specificity of whichever individual alternative happened to match.^[ref]

Specificity is not the whole priority system. Origin, importance and CSS cascade layers can decide before selector counts are compared; later source order can decide a remaining tie. Consequently, an author can override a highly specific normal declaration with a lower-specificity important declaration in the appropriate cascade context.^[ref]