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 Stella Odewumi
Stella Odewumi
1,675 Points

Specificity and psuedoclasses

Hello guys,

I was playing around in the CodePen attached to lesson: http://teamtreehouse.com/library/css-foundations/advanced-selectors/additional-pseudoclasses

The only change I made to my CSS is that I altered the target pseudo-classes' background color to steelblue. It looked like this: :root { background-color: #e0eef5; }

:target { color: white; background-color: steelblue; }

div:not([id="s2"]) { background-color: tomato; }

Why is that when I click the targets, the background-color change only applies to target section 2? I understand that target section 2 accepts the background-color change because it is not specified under div:not([id="s2"]). However, why doesn't the color change to steel blue when I click on target sections 1 and 3? Is it because div:not([id="s2"]) has a greater specificity than :target? If yes, why is this so?

Thank you for your help!

Alex Tasioulis
Alex Tasioulis
4,950 Points
Alex Tasioulis
Alex Tasioulis
4,950 Points

I think the problem here is that :target points to the root of the page (not the :root pseudoclass), whereas div:not points to divs, which are a lot lower down the hierarchy and therefore a lot more specific. If you do div:target instead of just :target, it should override your div:not([id="s2"]).

Stella Odewumi
Stella Odewumi
1,675 Points

Thank you Alex. You were really helpful!

1 Answer

Eric Flowers
Eric Flowers
9,472 Points
Eric Flowers
Eric Flowers
9,472 Points

Specificity hierarchy Every selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector:

  1. Inline styles (Presence of style in document). An inline style lives within your XHTML document. It is attached directly to the element to be styled. E.g. <h1 style="color: #fff;">
  2. IDs (# of ID selectors) ID is an identifier for your page elements, such as #div.
  3. Classes, attributes and pseudo-classes (# of class selectors). This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
  4. Elements and pseudo-elements (# of Element (type) selectors). Including for instance :before and :after. If you don’t know what exactly each of these terms stands for, you can take a look at the brief overview of them; in the last section of this article.

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

Stella Odewumi
Stella Odewumi
1,675 Points

Thanks!