CSS Specificity

Inline styles
Ex: <h1 style=”color: green;”>

Ex: #section { padding: 10px; }

Classes and pseudo-classes
Ex: a:visited { text-decoration: underline; }

Elements pseudo-elements
Ex: h1, p, :before, :after

100 for each ID value

10 for each class value or pseudo-class

1 for each element selector or pseudo-element

Inline style is always given the highest priority and gets a specificity value of 1000

Specificity: Basic Principles

ID selectors have a higher specificity than attribute selectors.

Contextual selectors are more specific than a single element selector.

The last rule defined overrides any previous, conflicting rules.

A class selector beats any number of element selectors.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store