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 Layout Techniques Flexbox Layout Build a Navigation with Flexbox

Do-Hee Kim
Do-Hee Kim
2,868 Points
Posted by Do-Hee Kim
Do-Hee Kim
2,868 Points

Why the need for specificity

I was wondering why in this demonstration, we need the .main-logo to be "more specific" than .main-nav li to apply css styles to it. Why isn't .main-logo specific enough? and is making it .main-logo:first-child the only way to make it as "specific" as we need to make it?

5 Answers

Xander Taylor
Xander Taylor
12,390 Points
Xander Taylor
Xander Taylor
12,390 Points

I would need more information to be able to help you. Can you copy the full question/error message/answer?

Do-Hee Kim
Do-Hee Kim
2,868 Points
Do-Hee Kim
Do-Hee Kim
2,868 Points

Thanks Xander!

Let me try to clarify. In the video lesson I was watching regarding Flexbox, Guil was going over styling a navigation using Flexbox. snippet of the HTML for the "main-nav" here:

ul class="main-nav" li class="main-logo"... /li li... li... li... li... /ul

I was following along totally fine until he got to styling the logo with class ".main-logo" and Guil proceeded to state that we use .main-logo:first-child to make it "more specific".

.main-nav { display: flex; height: 100%; }

.main-nav li { align-self: center; margin-left: 10px; margin-right: 10px; }

.main-logo:first-child { margin-right: 50px; }

I didn't understand why we couldn't use ".main-logo" and instead had to use ".main-logo:first-child" and why the margin style wouldn't be applied to .main-logo if we didnt use the pseudoclass. I understand it DOESNT work, but I didn't understand why.

Let me know if that helps!

Xander Taylor
Xander Taylor
12,390 Points
Xander Taylor
Xander Taylor
12,390 Points

Great question. If you look at the code for his nav:

<ul class="main-nav">
    <li class="main-logo"><h1><a href="#">Logo</a></h1></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
</ul>

You can see that the <li class="main-logo"> would also be selected by a rule that styles all list items that are children of "main-nav". He in fact has a rule like that, right above the rule for the .main-logo:first-child (see below):

.main-nav li {
    -webkit-align-self: center;
    align-self: center;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    margin-left: 8px;
    margin-right: 8px;
}

So, if he left off that pseudo class of first-child, the rule applying to all list items that are children of the class main-nav would trump the one that he's trying to right. That's why he needs more specificity.

You can download the project files and mess around with the "final" css to verify that I am right. If you remove the pseudo-class, the margin shrinks.

Does that all make sense?

Xander Taylor
Xander Taylor
12,390 Points

sorry about all the type-os. I really do know the difference between write and right I promise :)

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

To add to this answer -

When you have two selectors that are selecting the same element then the browser has to look at the specificity of each one. If one is higher than the other then the higher one is applied. If they match then the one that comes later is applied.

In this case .main-nav li is made up of 1 class and 1 type selector. So in order to override the right margin with a different value for the first list item you have to match or exceed that specificity. The selector .main-logo does correctly select the first list item but it is not enough because it is only 1 class selector.

.main-logo:first-child is made up of 2 class selectors and so it exceeds the specificity of the earlier selector and the new right margin will take effect.

There are other selectors that would work too. Some don't even need to use the .main-logo class.

li.main-logo - This one matches the specificity of .main-nav li with 1 class and 1 type selector.
.main-nav .main-logo
.main-nav li:first-child - Doesn't use .main-logo class

And there are others. I would probably personally use the last one as I think it makes it more clear what you're doing.

.main-nav li {
/* Style for all list items */
}

.main-nav li:first-child {
/* Styles to override or add for the 1st list item only */
}
Do-Hee Kim
Do-Hee Kim
2,868 Points
Do-Hee Kim
Do-Hee Kim
2,868 Points

Thanks so much Xander and Jason!! Your answers were really helpful.

I thought that specifying a list item by its class was specific enough to target that list item and trump any rules that might apply to that element proceeding it, but I see that's not the case and why there is the need for specificity.

Thanks a bunch :) d.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

Xander Taylor
Xander Taylor
12,390 Points
Xander Taylor
Xander Taylor
12,390 Points

Glad to help! I learn a lot from trying to answer folks' questions on here. I hadn't thought about your question/situation in that way either until you asked about it. So thank you!