Cascade

The mechanism by which browsers resolve conflicting CSS declarations based on origin, specificity, and order.

기술 세부사항

CSS cascade is calculated as a tuple (a, b, c): 'a' counts ID selectors, 'b' counts class/attribute/pseudo-class selectors, 'c' counts type/pseudo-element selectors. Inline styles override all selectors. !important overrides inline styles but creates maintenance problems. The new @layer rule (Cascade Layers) adds a fourth dimension to the cascade, allowing authors to define explicit priority ordering for entire groups of styles, reducing specificity wars in large codebases.

예시

```css
/* Specificity: (0,0,1) — type selector */
p { color: black; }

/* Specificity: (0,1,0) — class selector */
.highlight { color: blue; }  /* wins over p */

/* Specificity: (1,0,0) — ID selector */
#title { color: red; }       /* wins over .highlight */
```

관련 용어

Specificity Box Model Flexbox Grid Custom Property Media Query Pseudo-class Pseudo-element Transition Keyframe Animation Z-Index Clamp Container Query Selector Combinator BEM Viewport Unit Calc Aspect Ratio (CSS) Stacking Context Logical Property Color Function Nesting Layer Scroll Snap :has() Selector Subgrid Scroll-Driven Animation View Transition Anchor Positioning Popover oklch() lab() Custom Properties Inheritance CSS min() CSS max() CSS Scope Starting Style Color Mix Text Wrap Balance CSS Nesting Selector Content Visibility CSS Paint API Relative Color Syntax

Categories

기술 세부사항

예시

관련 포맷

관련 도구

관련 용어