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 trialNathon Reed
3,664 Pointsis 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
26,676 PointsHi 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.
Nathon Reed
3,664 PointsOkay thank you very much that makes more sense know.
Gina Bégin
Courses Plus Student 8,613 PointsI 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
26,676 PointsHi 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
Courses Plus Student 8,613 PointsThank 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). :)