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
Eastern Lai
5,406 PointsFirst-child of .main-logo vs .main-logo?
I'm not sure I'm understanding why we have to put a margin on the :first-child of .main-logo and not just .main-logo?
6 Answers
Marcus Parsons
15,719 PointsHey Eastern Lai,
As Guil says in the video, the :first-child pseudo class for ".main-logo" has more specificity than declaring ".main-nav li". This is because it is directly targeting the first child of the element with a class of "main-logo" (which is very specific) instead of all of the list items in "main-nav" (which is very general). Because of the specificity of that selector, you get that nice, automatic separation between the logo and the first list item in the navigation, instead of the margin being applied to all list items and making them spread out into automatic margins.
I hope that makes sense!
Yingnan Zhang
3,642 PointsI am having the same doubt as you initially. But after doing some research, I think maybe this is the answer:
First, teacher(Guil) is trying to override the margin-right property from 8px to auto, as .main-logo element's margin-right is set to 8px using: .main-nav li { margin-right: 8px; } Second, to successfully doing override, we need to give .main-logo element more css specificity. If you type in the two ways in this website: http://specificity.keegan.st/ .main-logo { } AND .main-nav li { }
You will find out the second one has more css specificity than first one. So, we need another way to select .main-logo element with higher specificity, which is: .main-logo:first-child { }
Here is another reference in MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
Hope my explanation is clear enough.
PLEASE correct me if I am wrong! Thanks!
Kevin Hewitt
4,329 PointsExcellent explanation! I was having trouble understanding why .main-logo alone wouldn't work, and I now understand. Thanks!
Antonio Jaramillo
15,604 PointsI, too, was confused. Thanks to Yingnan Zhang's posted links, I think I have it down. Because we selected .main nav li, we can't discount that the .main-nav class is lower in the specificity order than is .main-logo because .main-logo is a child of .main-nav. Therefore, if we merely select the .main-logo class to override styles that we have appended to its parent, .main-nav, nothing will happen. However, .main-logo:first-child works because pseudo-classes are lower in the specificity order than are classes. Also, .main-nav .main-logo works because we are overriding styles to the same class that we had previously appended other styles to.
Here is the order of specificity in CSS:
Universal selectors Type selectors Class selectors Attributes selectors Pseudo-classes ID selectors Inline style
Eastern Lai
5,406 PointsThanks for the explanation.
I guess I am more wondering why even use the first-child pseudo class, why not just use .main-logo since isn't it specific to the logo? I tried adding a margin to .main-logo and nothing happens so I'm imagining he does it for a reason, just not sure if I completely understand why.
Marcus Parsons
15,719 PointsAh, I see what you're asking now. Well, I don't know the answer to that, but I am curious myself now.
Eastern Lai
5,406 PointsThanks! Now I don't feel so bad. Anyways I tried to do what I thought would work, which is using the .main-logo as the selector but that did absolutely nothing.
Marcus Parsons
15,719 PointsNo problem! I can admit when I'm stumped, too. My theory, though, is that it has to do with the flex layout and margins. I did some experiments and found that targeting ".main-nav .main-logo" will work the very same as ".main-logo:first child". Also, targeting the h1 element using ".main-logo h1" will work, as well. I think it is a little weird that the margin can't be applied to main-logo unless it is either applied to the h1 element (as first-child does too) or to the main-logo when it is specifically called on through "main-nav".
Marcus Parsons
15,719 PointsI'll tell you a great place to ask your question, which is StackOverflow. You can get a really good answer fairly quickly on there. And if you do, you can come back here and post it so you can show me. :)
Eastern Lai
5,406 PointsThanks for the help Marcus, if I ever get around to it I definitely will. At least now I can play around with the other selectors you found (also maybe learn to trial and error other selectors for myself as well).
Marcus Parsons
15,719 PointsExactly! Good luck, Eastern Lai! =]
csb
437 PointsHi,
This also threw me a little.
My instinct would be to target .main-nav li:first-child {}. I still don't understand .main-logo:first-child {} compared to perhaps targeting .main-nav .main-logo., it doesn't fit with my understanding of the child pseudo class.
Can anybody expand even further, perhaps with other uses?
Chris
georgebullock
2,392 Pointsgeorgebullock
2,392 PointsHey Marcus Parsons and Eastern Lai ,
I too was unclear why Guil Hernandez used the :nth child psuedo class, which led me here.
@marcus I feel pretty confident the issue is specificity. I'm not 100% sure, but I suspect that the ".main-nav li" rule is more specific than the ".main-logo" rule, which is why nothing happens when you try to recreate the margin with ".main-logo."
I think ".main-nav .main-logo" works because it appears to have equal specificity to the psuedo class approach and is lower in the document cascade.
Would be nice to get some clarification on this and perhaps a generalized approach to handling this type of problem.