learning-playground

Chapter 4: Specificity, Inheritance, and the Cascade

Three weight categories, compared left-to-right: 0,0,0

1,0,0 always beats 0,500,500

For each ID => 1,0,0
For each class attr value, attr, and pseudo-class => 0,1,0
For each element and pseudo-element => 0,0,1
Combinators do not add weight
Universal selectors * and :where(<any-selector-here>) add 0,0,0
- Important to note 0,0,0 is still a weight
:is, :not, and :has use the higher specificity in the list of selectors, ignoring if the higher specificity selector is actually on the element
- <p> and :is(p, #foo.bar.hello) = 1,2,0

Specificity is conferred on all associated declarations
h1 { color: silver; background: black } equals:
- h1 { color: silver }; = 0,0,1
- h1 { background: black }; = 0,0,1

ID selectors !== attr with id
- #pencil = 1,0,0
- [id=”pencil”] = 0,1,0
!importance does not add to specificity
- “normal” weights are grouped, then compared
- “important” weights are grouped, then compared
- important > normal comparison

Descendants only inherit with the exception of a few properties defined on <body> that are not defined on <html> (e.g., background, overflow)

Cascading Style Sheets

Find all rules containing selector that matches a given element.
Sort decls by explicit weight (normal or important).
Sort decls by origin.
- author > reader > user agent (normal)
- user agent > reader > author (important)
Sort decls by encapsulation context (e.g., shadow dom).
- Allows encapsulated styles to override inherited styles from outside
Sort decls by if they are element attached.
- style = element attached
Sort decls by cascade layer.
- later the layer appears = higher precedence (normal weight)
- no layer = implicit (default) = highest precedence (normal weight)
- order reversed with important weight
Sort decls by specificity.
Sort decls by order of appearance.
- imported stylesheets = before all styles in the sheet itself

Precedence order:

Ex:

Normal weights (author wins)
- p { color: black; } (author)
- p { color: black; } (reader)
Important weights (reader wins)
- p { color: black !important; } (author)
- p { color: black !important; } (reader)

Introduced in 2021.

Basically @layer at-rule.
Order of appearance (reverse if important weight)
Implicit = no @layer defined and highest precedence
Layers can be defined with no rules, then added to later
- @layer foo, bar; defines the layers foo and bar, in that order.
- @layer bar { ... } then @layer foo { ... } doesn’t redefine the order.
@layer can be unnamed
- Unnamed !== implicit (default)
Layers can be nested
Importing another file with layers becomes nested `

Ex:

Explicit layers
- @layer site { p { color: red; } }
- @layer page { p { color: blue; } } wins (last)
Implicit + explicit
- p { color: teal; } wins (implicit = highest precedence)
- @layer site { p { color: red; } }
- @layer page { p { color: blue; } }
Implicit + explicit but unnamed
- p { color: teal; } wins (implicit = highest precedence; unnamed !== implicit)
- @layer { p { color: red; } }
- @layer { p { color: blue; } }
Redefine explicit layer order
- @layer page, site;
- @layer site { p { color: red; } } wins (site is last in the definition)
- @layer page { p { color: blue; } }

Another good read: [Cascade Layers Guide

CSS Tricks](/css-cascade-layers/#test-your-knowledge-which-style-wins)