Back To The Basics: CSS Specificity

CSS specificity is a big top in web development but having a good foundational understanding is essential to writing clean and well organized CSS.

All things being equal i.e. if you have the same rule in your style sheet twice then the latest rule is the one that will be enforced.

.content h1 {
  padding: 5px;
  color: green;
}

# this will take precendence
.content h1 {
  padding: 10px;
  color: blue;
}

The more elements you include in a declaration if they are equal will take precedence

# more specific so will take precedence
body div div h1 p {
  color: purple
}

div h1 p {
  color: gray;
}

In terms of specificity the order is style attribute, id (#), class (.) or pseudo-class or attribute, then element

<div class="other-class" style="color: green">
  Foo
</div>
<style>
.other-class {
  color: purple;
}

div {
  color: yellow;
}
</style>

Check out codepen for the above