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 Basics (2014) Basic Selectors Reusing Classes

Aaron Michael Ho
PLUS
Aaron Michael Ho
Courses Plus Student 1,299 Points
Posted by Aaron Michael Ho
Aaron Michael Ho
Courses Plus Student 1,299 Points

Weight of competing CSS selectors

In this video, it's mentioned that an "id" selector holds more weight than a "class" selector. So if an element has: -a blue background because of its "class"; and -a green background because of its "id"

      The resultant background would be blue.

Where does the 'type/element' selector come in? If my type selector calls for it to be gray, what color will the background be now?

      Still blue?

1 Answer

Ezra Siton
Ezra Siton
12,644 Points
Ezra Siton
Ezra Siton
12,644 Points

Who wins? in your case the ID

id > class > element

Why? The following list of selector types increases by specificity (MDN docs):

  1. Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
  2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
  3. ID selectors (e.g., #example).

Example:

<style>
p{

 color:red;
}

.blue{
color: blue;

}

#orange{
color: orange

}
</style>

<p class="blue" id="orange">
  the color text is orange
</p>

Nice visual link to learn this issue: https://specificity.keegan.st/