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
Carlos José
Courses Plus Student 12,431 Pointsfirst-child, last-child and only-child are good friends and hang out regularly
I'm doing a small list of all the terms and teachers notes on my recently finished Web Design track. And I found that when a CSS style on first child applied to a list won't get the first child style when this child is an only child. I included a style for :only-child but it still doesn't get applied in Chrome.
Old code : https://drive.google.com/file/d/0B_PzJ-CgDySgYU5yb1I1ZmtvdGc/view?usp=sharing
And... I learned that this is what happens when you use :first-child, last-child and :only-child together. An :only-child results to be true for first-child and last-child so if the :only-child rules are written before, then the latter rule is applied instead, from the cascading method that resolves conflicts in which rules should be applied.
Fixed code : https://drive.google.com/file/d/0B_PzJ-CgDySgT3kyNm1YS2NJa2M/view?usp=sharing
Carlos José
Courses Plus Student 12,431 PointsYes. Just pointing out something interesting I learned that might escape. I expected that the only-child would be more relevant since is not part of many elements and just one. They all match and then cascading takes place to decide the style for the list element.
1 Answer
Steven Parker
231,248 PointsYou can also combine selectors to achieve the same target as :only-child, but with higher specificty like this: :first-child:last-child. This will take precedence over either individual selector, and over an actual :only-child selector, even if they come later in the file.
Carlos José
Courses Plus Student 12,431 PointsReally nice!
This is how I tried it out :
'''ul li:first-child:only-child { border-radius: 7px 7px; } ul li:last-child { border-radius: 0 0 7px 7px; } ul li:first-child { border-radius: 7px 7px 0 0; }'''
Thanks!
Jason Anello
Courses Plus Student 94,610 PointsI think you should only increase the specificity if you have good reason to do so. You shouldn't increase it just so you don't have to worry about what order you put things. It can make the css harder to follow and be an inconvenience further down in the stylesheet depending on what you're trying to do.
This discussion about :first-child, :last-child, and :only-child doesn't seem to be all that different from the link-related pseudo classes. There's a recommended order if you're using all of them: LVHA
a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
You wouldn't unnecessarily increase the specificity of some of those selectors so that you didn't have to worry about putting them in the right order. You would just put them in the right order.
I think that in the case of the pseudo classes posed in the question you have to consider what style you want to see if more than one apply, that one goes last. Similar to the :active class on links. When visited, hover, and active all apply at the same time, you would likely want the the active style showing so you put it last.
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsHi Carlos,
Did you have a question here or just pointing out some things you learned?
Also, I'm not sure what you mean in your first paragraph. If you only have 1 list item then :first-child, :last-child, and :only-child will all match that element.