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

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

How 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
Dekin O'Sullivan
10,749 Points

Wow 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.

You’re welcome, glad it helped you.

Hi 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.

:nth-child

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:

:not()

ul > li:not([class="not"]):before {
  position: absolute;
  content: "β€’ ";
  color: rgb(176, 172, 25);
  left: 0;
}
Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Rafael,

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... :(

I created a codepen, maybe this help:

http://codepen.io/Capati/pen/meKayR

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Thanks Rafael! Definitely helps!