Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS How to Make a Website CSS: Cascading Style Sheets What is CSS?

CSS Specificity

The video lightly mentioned specificity, can you elaborate on it?

4 Answers

Laura Cressman
Laura Cressman
12,548 Points

I think this article does the topic much better justice than I ever could, but here is my two cents. http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Specificity allows you to specify which properties you wish to apply to which elements. Basically, there are two parts to CSS rules. There's the part of what you want it to look like (for example, background: green;) as well as what you want that look to apply to (for example, h1, .nav, #wrapper, etc.). Specificity uses a set of rules outlined in the article above to determine which elements get the looks you want applied to them.

A big part of specificity is the order in which the styles are applied. All else equal, if you accidentally apply two styles to the same element, then the last style wins. For example, consider the code:

div {
   background: red;
}

div {
   background: green;
}

In this case, the background of the divs will be green because this rule is applied second. You can get around this with the !important flag (background: red !important; will make it red) but be careful when using it, and I try to avoid it. Here is more detail on CSS tricks as well: http://css-tricks.com/specifics-on-css-specificity/

Hope that helps! Let me know if you have further questions.

Smiles :) Laura

Hi Kendra, here's some additional resources for you on CSS specificity and the cascade.

CSS Specificity and the Cascade

Treehouse Blog

Chris Shaw
Chris Shaw
26,650 Points

Hi Kendra,

Smashing Magazine have a great article on this which I recommend you read.

http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Thanks for the fast response! I will definitely check those resources out.