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

JavaScript

Liam Hayes
seal-mask
.a{fill-rule:evenodd;}techdegree
Liam Hayes
Full Stack JavaScript Techdegree Student 13,116 Points
Posted by Liam Hayes
.a{fill-rule:evenodd;}techdegree
Liam Hayes
Full Stack JavaScript Techdegree Student 13,116 Points

What does this mean: "ID selectors carry the most weight"?

I came across this quiz question and I was wondering if somebody could explain to me what it means.

Quiz Question 6 of 9
Which selectors have the most specificity and carry the most weight?

Choose the correct answer below:       
A   type selectors
B   class selectors
C   ID selectors
D   descendant selectors

The correct answer is C. ID selectors

What does this mean? Why do they carry the most weight? Why do the other options not carry as much weight?

Thank you very much :)

(The location of this quiz is CSS Basics > Basic Selectors > Basic Selectors Review)

1 Answer

Andrew Hinkson
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Hinkson
Full Stack JavaScript Techdegree Graduate 25,822 Points

When it says "what carries the most weight" its asking which takes precedence over the others. ID selectors are very specific in your HTML and also there can only be one per HTML document. Say you have a two paragraph elements:

<p class="red">This will be red</p>
<p class="red" id="yellow">This will be yellow</p>

.red {
color: red;
}

#yellow {
color: yellow;
}

Even though both paragraph elements have the class red the second one will be yellow because the ID is more specific than a class. So it would take precedense over class or the type selector such as 'p' or 'h1'.

Andrew Hinkson
.a{fill-rule:evenodd;}techdegree seal-36
Andrew Hinkson
Full Stack JavaScript Techdegree Graduate 25,822 Points

not a problem. glad i could help.