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 Leumas Erasa
Leumas Erasa
974 Points

Specificity- How would this conflict be resolved

What colour would the "Hello World" tag be with the code below?

Given that elements have a specificity of 1 and Classes have a specificity of 10 should the "Hello World" tag not be coloured purple? Any help appreciated. 

p {
    color: green;
  }

  .message{
    color: purple;
  }

<div class="message">
     <p>Hello World</p>
 </div>

4 Answers

Saskia Lund
Saskia Lund
5,673 Points
Saskia Lund
Saskia Lund
5,673 Points

The "Hello World" will be green, because you defined the text color green for any text nested within p tags.

If you placed text without wrapping it in p tags inside the div.message the text will be purple.

To overwrite the p textcolor within .message you'd have to be more specific in your css:

.message p {
color: purple;
}

/* Or you could add this rule to the existing purple text rule like so : */

.message,
.message p {
color: purple;
}

And instead of being more specific within your CSS you could always also add the class .message to the p like so:

<div class="message">
     <p class="message">Hello World</p>
 </div>

Hope this helped.

Leumas Erasa
Leumas Erasa
974 Points

Thanks for the response. Just so I fully understand- does the below not set all child elements of .message including p tags to purple though?

.message{
color:puple;
}
Saskia Lund
Saskia Lund
5,673 Points

Exactly - as long as you do not assign any other text colors to the containing child elements, the .message will set color purple to the text within a p inside a div.message.

As soon as you assign a text color to the p, it will switch colors.

RAFAEL COSTA
RAFAEL COSTA
6,243 Points
RAFAEL COSTA
RAFAEL COSTA
6,243 Points

These specificities represented in numbers doesn't just follows like this. In fact you must think about specificity comparing with the real world. In this case let's example:

Class = Mammals Element = Human ID = Leumas Erasa

So, the characteristics of ID comes first, then the elements and then the classes. That's why your CSS code is respecting the P element instead of the Class.

Leumas Erasa
Leumas Erasa
974 Points

I thought elements came after classes in specificity

Jason Anders
MOD
Jason Anders
Treehouse Moderator 145,863 Points
Jason Anders
Jason Anders
Treehouse Moderator 145,863 Points

It would set all the child element to purple, except the p tags as Saskia pointed out. the p tag is more specific than just any child element, so therefore, takes precedence over the .message class. If you used h1 or h2 etc tags instead, they would be purple.

Think of it as a bunch people standing across the street, if you yelled "HEY YOU!" they would all turn. But... if you yelled "JASON!" only I (or someone named Jason) would turn. -- specificity.

Keep Coding! :)

Leumas Erasa
Leumas Erasa
974 Points
Leumas Erasa
Leumas Erasa
974 Points

Thanks for all your help guys!!!!