Syntax
(inline, ID, class, type)Examples
Comparing Specificity
Working through the specificity of several selectors.
/* p -> (0,0,0,1) - one type selector */
/* .box -> (0,0,1,0) - one class selector */
/* #header -> (0,1,0,0) - one ID selector */
/* .box.featured -> (0,0,2,0) - two class selectors, higher than one class */
/* #header .box -> (0,1,1,0) - one ID + one class, beats any class-only combination */
.box.featured { color: blue; } /* (0,0,2,0) wins over .box alone */
.box { color: red; } /* (0,0,1,0) loses */Why !important Should Be a Last Resort
!important overrides normal specificity entirely, which can make future overrides very difficult.
.box { color: red !important; } /* wins regardless of specificity of other rules... */
#header .box.featured { color: blue; } /* ...even against a highly specific selector like this */
/* Now overriding .box requires ANOTHER !important, escalating a maintenance problem */Best practices
- Keep specificity as flat and low as possible throughout a project - prefer single class selectors over deeply nested or ID-based selectors
- Avoid ID selectors for styling entirely in most modern projects, since their high specificity makes later overrides difficult
- Treat !important as a last resort, not a quick fix - it breaks the normal cascade and often leads to an escalating "specificity war"
- When two rules genuinely conflict, source order settles ties at equal specificity - the rule declared later in the stylesheet wins
At a glance
- Purpose
- Presentation and layout
- File extension
- .css
- Runs in
- Web browsers
- Usually used with
- HTML and JavaScript
Specifications & further reading
Related CSS documentation
Cascade Layers (@layer)
@layer lets you explicitly define the priority order between groups of CSS rules, independent of selector specificity. Styles in a layer declared later always beat styles in an earlier layer, regardless of how specific the earlier layer's selectors are - solving specificity conflicts between resets, frameworks, components, and overrides in a predictable, structured way.Custom Properties (CSS Variables)
Custom properties, written as --name, let you define reusable values directly in CSS, accessed with var(). Unlike Sass variables, they are live in the browser - they can be read and changed with JavaScript, and they respect the cascade, meaning their value can be different in different parts of the DOM.Media Queries
Media queries apply CSS conditionally based on characteristics of the device or viewport, most commonly width, forming the foundation of responsive design. They use the @media at-rule with a condition, and can be combined with and/or logic to test multiple conditions at once.prefers-color-scheme & prefers-reduced-motion
These media queries detect user system preferences rather than device characteristics. prefers-color-scheme detects whether the user has requested a light or dark theme at the OS level. prefers-reduced-motion detects whether the user has requested minimal animation, important for users with vestibular motion sensitivity.
@layer lets you explicitly define the priority order between groups of CSS rules, independent of selector specificity. Styles in a layer declared later always beat styles in an earlier layer, regardless of how specific the earlier layer's selectors are - solving specificity conflicts between resets, frameworks, components, and overrides in a predictable, structured way.Custom Properties (CSS Variables)
Custom properties, written as --name, let you define reusable values directly in CSS, accessed with var(). Unlike Sass variables, they are live in the browser - they can be read and changed with JavaScript, and they respect the cascade, meaning their value can be different in different parts of the DOM.Media Queries
Media queries apply CSS conditionally based on characteristics of the device or viewport, most commonly width, forming the foundation of responsive design. They use the @media at-rule with a condition, and can be combined with and/or logic to test multiple conditions at once.prefers-color-scheme & prefers-reduced-motion
These media queries detect user system preferences rather than device characteristics. prefers-color-scheme detects whether the user has requested a light or dark theme at the OS level. prefers-reduced-motion detects whether the user has requested minimal animation, important for users with vestibular motion sensitivity.