DEV Community

Cover image for Cascading what? Explanation about CSS Cascading rules
Nitsan Cohen
Nitsan Cohen

Posted on • Edited on

4 2

Cascading what? Explanation about CSS Cascading rules

CSS stands for Cascading Style Sheets

I want to talk with you about the cascading part today.

You probably already know that CSS is not a programming language. Instead, CSS is all about declaring rules to the elements in our DOM.

We have all kinds of ways to declare those rules.
For example, inline styles:

<div style="backgroundColor:red" class="my_div">Hi </div>
Enter fullscreen mode Exit fullscreen mode

Or class selectors:

.my_div {
background-color:green;
}
Enter fullscreen mode Exit fullscreen mode

But how do these rules apply? Which one is more powerful?

That is where the cascading rules come into action. The inline style will rule out the class selector in the example above.

I sometimes see people struggling with the cascading rules, but actually, it is straightforward.

When conflicting styles appear, the first thing your browser will check is the origin of the stylesheet.

We have two main types of origins:

-user-agent styles, which in simple words means browsers' default.
-Author styles, which in simple terms means - your custom styles.

The author styles will always override the user-agent styles.

So far, so good. But what if we have conflicts in the author styles themselves?

Well, it's effortless to remember that the winner is always inline styles.

After that, we get to the scary (and problematic to pronounce) word specificity.

Just memorize it: IDs, Classes, attributes, pseudo-classes, elements, pseudo-elements.

Or in symbols:

#id (avoid using them!)
.class (Classes).
h1[lang="pt"] (attributes).
h1: hover (pseudo-classes).
h1 (elements).
h1:: first-letter (pseudo-elements).
Enter fullscreen mode Exit fullscreen mode

Lastly, if no specificity rules apply, the browser will use the rule that appears later in the source.

I've created a nice diagram to help you with that. Please learn it by heart if you dare call yourself a frontend developer :)

css cascading rules

0h, and don't use !important (unless you have a significant reason).


  • For more posts like this follow me on LinkedIn

  • I work as frontend & content developer for Bit - a toolchain for component-driven development (Forget monolithic apps and distribute to component-driven software).

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay