CSS Specificity Guide

CSS Specificity Guide — Master CSS specificity rules with practical examples of how to calculate and manage selector priority. The guide walks through Selector Weights, Managing Specificity. Element selectors: 0,0,0,1 (div, p, h1). Pseudo-elements: 0,0,0,1 (::before, ::after). Class selectors: 0,0,1,0 (.class, [attr], :hover). ID selectors: 0,1,0,0 (#id). Inline style: 1,0,0,0 (style=""). !important: 1,0,0,0,0 (breaks cascade). Higher weight wins regardless of source order. Keep specificity low for maintainable CSS. Avoid IDs in selectors (use classes). Don't nest selectors unnecessarily — `.nav a` is simpler than `.nav > ul > li > a`. Avoid !important — use cascade order instead. Use BEM methodology to keep specificity flat and predictable. The guide is organized into 2 sections that build on each other, each pairing a prose explanation with real CSS you can use as-is. Related guides: CSS Introduction, CSS Selectors, CSS Box Model, CSS Flexbox, CSS Grid. This is one of 68 CSS guides on CSS Reference — see the full list on the guides page.