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
Melissa Taylor
7,352 PointsCSS Selector Question
Hi there,
I'm trying to override some styles in an existing WordPress template here and came across a CSS selection question. In the code below, I'm trying to target only the second instance of the .purple class. The order may change in the future, so I'm trying to avoid the nth-child route.
I know I could add additional classes, but I wanted to make sure I wasn't missing a way to select that with pure CSS. Thanks!
<div>
<ul>
<li class="purple"></li>
<li></li>
<li></li>
<li></li>
<li class="purple"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Melissa,
It's not clear to me in your question whether there can be more than 2 purple classes. I think I understand that the second purple class might not always be the 5th child but will you possibly have more than 2 list items with the purple class?
If it is only ever going to be 2 items then you can use the general sibling selector ~
.purple {
/* styles for the 1st purple class */
}
.purple ~ .purple {
/* styles for the second purple class */
/* This selector will target a purple class if it is preceded by a sibling purple class */
}
If you will have more than 2 purple classes at some point then you can still do it with the general sibling selector.
.purple,
.purple ~ .purple ~ .purple {
/* styles for the 1st, 3rd, 4th, 5th... */
/* The 2nd selector here does not select the second purple class because it does not have 2 preceding purple siblings. */
}
.purple ~ .purple {
/* This targets the 2nd purple class onward but does not affect the 3rd onward because the selector above has higher specificity */
}
I would say that if your situation matches the 1st example then that is probably a reasonable solution.
If it's like the 2nd situation then you'll have to decide for yourself whether this is going too far with the selectors and whether it makes more sense to add a class. It seems to me that the selectors used in the 2nd example aren't going to be very efficient but if you're not working on a large high performance website then it probably won't matter all that much.
Travis Joyner
14,553 PointsSo the second purple class might eventually be the fourth or the last or even the first? If that's the case, then I think giving it a unique class might be the easiest way. Maybe someone else will come along with a magical solution, but I'd just make a new class.
Jason Montoya
6,550 PointsMelissa, I agree with Travis. I am not sure how many classes you can add to a single element (or if there is a limit), but I think adding an extra class to project would solve the issue.
Something like this should work:
<li class="purple special-purple"></li>
Jason Anello
Courses Plus Student 94,610 PointsHi Jason,
I think browsers probably have a practical limit but it looks like they can handle at least a few thousand classes based on a little google searching I did.
I think whatever the limit is it's going to be more than what you'll reasonably need to use.
Melissa Taylor
7,352 PointsMelissa Taylor
7,352 PointsThanks Jason. Yes! This is exactly what I was trying to do and knew there was some sort of sibling selector. There are only two instances of the .purple class, so I think the sibling selector is appropriate.