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 CSS Foundations Advanced Selectors Additional Pseudo-Classes

is it possible to have 2 or more arguments in selctor like div:not (:emtpy,[id="s1"]) ?

if not then I am assuming I have to write 2 sets of code div:not (:emtpy) { code } div:not ([id="s1"]) {code}

4 Answers

Chris Shaw
Chris Shaw
26,676 Points

Hi Nathon,

You don't have to write out 2 separate selectors to accomplish this, because :not is a pseudo selector you can chain it similar to how you can chain :hover and :before one after the other, see the following pen which demonstrates this.

http://codepen.io/ChrisUpjohn/pen/znprB

Okay thank you very much that makes more sense know.

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points

I still have a question about this, Chris Upjohn. In the tutorial, Guil shows that he is using brackets inside of the parentheses to specify what not to select.

Ex: div:not([id="s1"]) { }

Why wouldn't you have to use the brackets, just the parentheses, in the chained version?

Chris Shaw
Chris Shaw
26,676 Points

Hi Gina,

The brackets define an attribute selector which Guil used to demonstrate the types of values the :not pseudo selector allows which is pretty much any valid CSS selector, so in the case of my example I'm targeting #one and #three directly using an id selector whereas I could also just use a class.

Another example would be if we needed to select a group of elements that didn't have a common class name but had something in common with their id, in that case we can use the attribute selector to pick a specific part of it and apply styles accordingly.

http://codepen.io/ChrisUpjohn/pen/eLudJ

If you look at the above pen you can see how the attribute selector benefits you but you need to keep in mind that these can be very expensive when dealing with performance if you have hundreds of elements that require the same styles in which you would use a class instead.

Hope that helps.

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points

Thank you Chris Upjohn. I'll need to study that a bit (I think my mind is jumbled from 65 hours of learning code this week). :)