Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by erez sason
erez sason
802 Points

Priority of a class when there are two classes in the same element

How to set the priority of a class in the html when I have two classes in the same element?

Example

html:
<div class="blue red">blue red (wanted priority: red)</div>
<div class="red blue">red blue (wanted priority: blue)</div>

css:

.blue{ color: blue;}
.red { color: red; }

I noticed the last one in the css is applied on the div-

.blue{ color: blue;}
.red { color: red; }

vs 

.red { color: red; }
.blue{ color: blue;}

But I want to set the priority in the html despite the one that writen last in the css.

Thanks!

Mark Buckingham
Mark Buckingham
5,574 Points

Hi,

Both of your rules have the same specificity so the last one takes precedence. Check out the links below it looks like you can use an '! important' rule to override the normal behaviour:

http://stackoverflow.com/questions/9459062/in-which-order-do-css-stylesheets-override http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade

As to wether this is a recommended practice or not is another thing.

5 Answers

erez sason
erez sason
802 Points

Thanks guys. I understand the cascading principle and the !important usage in the css. My question is - is it possible to have some control on the priority from the html file when there are few classes applied to the same element.

Vasilij Zhukov
Vasilij Zhukov
1,790 Points

Hi erez, the thing is, what class attribute in your HTML doesn't care about order of classes (like in math 3+1 same as 1+3). That's why You see only the last one, written in CSS

So use:

<div class="red">for red color</div>
<div class="blue">for blue color</div>

If you want to know why it is so, here is some explanation: For example you trying to create two buttons with the same paddings and same font size, but different colors. Let's take red and blue. And one more, green, button with a little bit bigger font-size.

So here is your html for this buttons: (jsfiddle)

<span class="button button-red">Red button</span>
<span class="button button-green">Green button</span>
<span class="button button-blue">Blue button</span>

And CSS:

.button {
    display: inline-block;
    vertical-align: middle;
    font-size: 1em;
    border-radius: 1em;
    padding: 3px 8px;
    border: 1px solid transparent;    
}

.button-red {
    color: red;
    border-color: red;
}

.button-green {
    color: green;
    border-color: green;
    font-size: 1.25em;
}

.button-blue {
    color: blue;
    border-color: blue;
}

So what just happend (o_O) You simply override the default rules of .button selector with next .button-color selector rules.

Mitchell Springer
Mitchell Springer
2,576 Points
Mitchell Springer
Mitchell Springer
2,576 Points

Whichever class you list last in your CSS file will take precedence. That's how Cascading Style Sheets work, where properties become active as you "cascade" down the style sheet. So class properties at the bottom of the sheet load last and therefore will override the same properties of the class loaded previously in the sheet.

Andrew Shook
Andrew Shook
31,709 Points
Andrew Shook
Andrew Shook
31,709 Points

Erez, in the example you gave above, because the html elements have the same classes which ever css class is last in the style sheet will be the one that is applied. Basically, both elements are the same, because the css engine for browsers doesn't match by order but my whether the html has all the classes. Now if you always want the the second blue-red div to be blue you could do something like this:

.red.blue:nth-child(2){
    background-color: blue;
}

or if you want it to alternate:

//applies a blue background to the 1st, 3rd, 5th, .....
.red.blue:nth-child(odd){
    background-color: blue;
}

//applies blue background to the 2nd, 4th, 6th, ....
.red.blue:nth-child(even){
    background-color: blue;
}
Mark Buckingham
Mark Buckingham
5,574 Points
Mark Buckingham
Mark Buckingham
5,574 Points

Probably not what you are after but you could override the style by setting the attribute directly in the HTML:

<p class="red blue" style="background-color: red">hello</p>
erez sason
erez sason
802 Points
erez sason
erez sason
802 Points

Interesting. I understand now that what I wanted (overriding one class with another class in the html) is not possible.

You gave me many solutions to go around the problem and I'll use some of them in my code. The example of Vasilij Zhukov helped a lot to understand more the hierarchy of writing a css code.

Thanks you all, Erez