Understanding Cascade, Inheritance, and Specificity

At some point, you will be working on a project and you will find that the CSS you thought should be applied to an element is not working. Usually, the problem is that you have created two or more conflicting CSS rules which point to the same element. Cascade, Inheritance, and Specificity control how CSS is applied when there are conflicting rules.

What is Specificity?

Specificity is how browsers decide which rule to apply if multiple rules have different selectors but could still apply to the same element.

It is basically a measure of how specific a selector’s selection will be:

  • An element selector is less specific — it will select all elements of that type that appear on a page — so will get a lower score.
  • A class selector is more specific — it will select only the elements on a page with a specific class attribute value, so it will get a higher score.

e.g We can color the text of an element in the body using either body selector or more specifically element selector. If we used both, the more specific one will be applied by the browser.

What is Cascade?

At a very simple level, this means that the order of CSS rules matters. When two rules that have equal specificity apply to the same element the one that comes last in the CSS is the one that will be applied.

What is Inheritance?

As the word suggests, some CSS properties set on parent elements are inherited by their child elements this is called Inheritance.

How to deal with it?

There are three factors to consider, listed here in increasing order of importance. Later ones overrule earlier ones:

  1. Order
  2. Specificity
  3. Importance

Let's talk about “!important”

!important is a piece of CSS that you can use to overrule all of the above calculations.

--

--

--

I write sometimes

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Become Cross Functional Polyglot Developer

Writing Code that tests: utilizing interfaces to write better code with resilient unit tests in…

Properties Of A Good Testing Taxonomy — Tentamen Software Testing Blog

Meta Interview Question — LeetCode 1136

OS13 Launcher APK v5.6 (MOD Prime Unlocked)

The bare bones of Big O Notation

Hadoop Single Node Cluster Setup

Using Evernote For My GTD System

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
Sakib Hussain

Sakib Hussain

I write sometimes

More from Medium

Understanding CSS Selectors

CSS Layouts & floats

Block, Inline & Inline-block. What’s the difference?

Block elements

Colors in #CSS