The Cascade part of CSS

Posted by Kyle Sevenoaks on October 25th, 2012, with 3 comments.

Category: Basics
Programming language: CSS
Tags: frontend, specificity

There have been many times I have seen some CSS selectors that "just won't work" that are usually down to the cascading nature of CSS. Also, I have seen that a lot of newcomers to CSS don't normally understand that the stylesheet cascades and that the order of the rules and specifity affect each other.

So here's a couple of tips to make sure you're respecting the cascade as well as specifying things properly.

The Markup

Ok, so we have some pretty standard markup:

<div class="myClass aSecondClass">Hi :)</div>

Now say we want to style the div, how do we select it properly and use overrides if necessary?

The Selectors

The first and most simple way to select the element is to use div on its own. This is good for reset styles and general defaults you'd like on your elements, I'd like to set a default background color to all the divs in my website, so I'll do this:

div {
    background: grey;
}

Ok, so now I have a nice neutral grey background color on all my divs, but I want to style the divs with .myClass to have a different background

div.myClass {
    background: green;
}

Now this selector says "select any div element with the .myClass class name." This is called specifity in CSS which basically narrows down which elements to select. We can use any className attached to an element to select it, or a combination if there is more than one:

div.myClass.aSecondClass {
    background: red;
}

Note that there are no spaces between these selectors, this means "Select any div element with the className .myClass and .aSecondClass."

div.myClass .aSecondClass {
    background: red;
}

With the added space between .myClass and .aSecondClass the selector changes "select any div element with the className .myClass that has a child element with the className .aSecondClass" "select any element with the className .aSecondClass that has a parent div with the className .myClass."

The Cascade

div.myClass {
    background: grey;
    border: 1px solid black;
    background: blue;
}

In this example, the background rule has been set twice. The element's background will be blue, not grey because CSS will always obey the rules closest to the bottom of any given selector.

div.myClass.aSecondClass {
    background: blue;
}

div.myClass {
    background: grey;
}

Now this is where specifity overrides the cascade. Even though the .myClass selector is closest to the bottom, the element's background will be blue as the other selector is more specific. 

Bare these in mind while writing CSS and you'll nail it. 

Comments

jice (2012-10-23 16:57)

select any div element with the className .myClass that has a child element with the className .aSecondClass.

I would rather say :
select any element with the className .aSecondClass that has a father div with the className .myClass

mingos (2012-10-24 15:02)

Seconded. You target the inner div after all :).

Kyle Sevenoaks (2012-10-26 09:07)

I agree, I've edited the article to reflect. Thanks :)

Post a comment