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 trialDekin O'Sullivan
10,749 PointsHow do I not apply a pseudo class to a certain element?
Hello,
In order to customize my list style elements to a certain custom color, i used a pseudo class. But there are certain lists I do not want my CSS to apply this pseudo class (I just want the standard styling) but don't know how to tell CSS not to apply the pseudo class to those specific lists.
The pseudo class I am using is:
.main_text li:before {
position: absolute;
content: "β’ ";
color: rgb(176, 172, 25);
left: 0;
}
So all of my "li" items in the ".main_text" class have this rule automatically applied to them. However, for some lists in the ".main_text" class I don't want to apply this pseudo class. How do I tell this to CSS?
For the moment my solution has been to give a specific id name to the lists I want to select and give them the following pseudo class:
.main_text li:before {
position: absolute;
content: "";
color: rgb(176, 172, 25);
left: 0;
}
In other words, I tell CSS to apply anther pseudo class with no content so as to override the 1st one.
This solution does not appear to be ideal however. Is there not a more efficient and elegant solution for this?
Many thanks
5 Answers
Dekin O'Sullivan
10,749 PointsWow Rafael,
Great answer, I had not thought of applying the n-th child solution to this problem!
Many thanks. I will let you know how that works out for me.
Rafael Capati
10,725 PointsHi Dekin, If you have a specific order to select, you can use the nth-child selector. In the example below I selected each even li child in the ul.
ul > li:nth-child(even):before {
position: absolute;
content: "β’ ";
color: rgb(176, 172, 25);
left: 0;
}
You can use the not() selector too to not select a specific class in your list:
ul > li:not([class="not"]):before {
position: absolute;
content: "β’ ";
color: rgb(176, 172, 25);
left: 0;
}
Dekin O'Sullivan
10,749 PointsRafael,
Unfortunately I can't get any of these solutions to work:
The "not" pseudo class does not work mainly because it put the customization everywhere except for the very specific place specified.
The nth-child does not work for me because it now only applies my customization to the first "li" element of the list.
I'm back to square one it seems... :(
Rafael Capati
10,725 PointsI created a codepen, maybe this help:
Dekin O'Sullivan
10,749 PointsThanks Rafael! Definitely helps!
Rafael Capati
10,725 PointsRafael Capati
10,725 PointsYouβre welcome, glad it helped you.