CSS Specificity Calculator
Calculate the specificity of CSS selectors to understand styling precedence
Examples: #header .nav, body div.container p:first-child
About CSS Specificity
CSS specificity is represented as four comma-separated values:
- Inline (I): Inline styles (style attribute)
- IDs (ID): Number of ID selectors (#id)
- Classes (C): Number of classes (.class), attributes ([attr]), and pseudo-classes (:hover)
- Elements (E): Number of element names (div) and pseudo-elements (::before)
Higher specificity selectors will override lower specificity selectors, regardless of their order in the CSS.