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 CSS Foundations Getting Started with CSS Adding CSS to a Page

Jun XIE
Jun XIE
10,363 Points
Posted by Jun XIE
Jun XIE
10,363 Points

how to decide which style to apply if importance and specificity conflicts?

If A style has higher priority than B style in terms of importance, but the reverse in terms of specificity, which style I should apply?

1 Answer

James Andrews
James Andrews
7,245 Points
James Andrews
James Andrews
7,245 Points

stylesheets will be applied in order they are defined unless the !important attribute has been used on a prior style.

The color would be black for all unordered lists even those with green class

ul.green {
    color:  green;
}

ul {
    color:  black;
}

Unless you do this.

ul.green {
    color:  green !important;
}

ul {
    color:  black;
}
Jun XIE
Jun XIE
10,363 Points
Jun XIE
Jun XIE
10,363 Points

Thanks for your help, ^_^. I think I've misunderstood some basic concepts when I ask the question. I thought inline styles , internal styles and external styles are the ingredients of the idea of Importance which stands with specificity and source order to determine indeed which style to apply to an element. Now I know the Importance refers to user agent style, user style and author style. So my idea is to ask when an element is both defined by an inline style and an internal style of different styling, like an inline styling of 'colour: red' for <body>, but an <h1> of 'colour: green' in an internal style, then which colour will the h1 text be? The confusion part is that inline style has higher priority than internal style, it will override internal style, but h1 has higher priority than body in terms of specificity, in such a case, how to determine the styling? If just consider inline style and internal style, the colour of h1 should be red, but if consider <body> and <h1>, the colour should be green. I don't how to determine, but I tried, and I get green colour.

James Andrews
James Andrews
7,245 Points 
h1 { color: red !important; }

takes importance over inline styles such as 

<h1 style="color: green;">something</h1>

because we've told the styles that the color in the stylesheet is important If but 

<h1 style="color: green !important;">something</h1>

will take priority over the stylesheet because it's got important defined afterwards.

Jun XIE
Jun XIE
10,363 Points
Jun XIE
Jun XIE
10,363 Points

Thanks, you helps me and now I know how much weight I should give to different styles. Another page I found also gives help: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi James,

You wrote in the first part of your answer:

stylesheets will be applied in order they are defined unless the !important attribute has been used on a prior style.

The color would be black for all unordered lists even those with green class

ul.green {
    color:  green;
}

ul {
    color:  black;
}

This is incorrect because it ignores specificity. ul.green has higher specificity than ul. ul's with a class of "green" will remain green and not be overridden by the color: black in the second rule.

James Andrews
James Andrews
7,245 Points

weird, i just tried it out and you are right. For some reason I thought that the cascade took importance. That if specified a UL after a UL.class then the UL would take higher importance. Sorry my bad. Usually when I write CSS I use LESS and am pretty damn specific so I've never really run into the situation and was going on assumptions of how I thought CSS worked.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Jun XIE,

You wrote in your comment:

but h1 has higher priority than body in terms of specificity

h1 and body are both type selectors and have equal specificity.