CSS3 Video Tutorial: not Selector

Russ Weakley

We’ve plucked another JumpCast video tutorial on aspects of CSS3 from the vast library at Learnable.

This time, Australian CSS expert Russ Weakley explains how to use the new CSS3 not Selector. You’ll find the transcript further down the page.

Transcript

G’day. My name is Russ Weakley from Max Design. I’m here today to talk to you about a new CSS3 selector called the not selector.

The interesting thing about the not selector is that it’s the opposite of almost every other selector you’ve used. In most cases, you’re aiming to style something very specific, “I want to style that element,” or, “That subset of elements.” With the not selector, you’re doing the opposite.

Instead of styling one element, you’re saying, “I want to style everything but that element.” We’re doing the opposite of most other selectors.

Let’s go and have a look at how it works. OK. Let’s look at the syntax for the not selector. The first thing is, we need a colon and then not. Then we need a start and an end bracket. Inside these brackets, we can put any simple selector. Simple selectors could be things like, H1, that’s a type selector. Or .intro, which is a class selector. Or we could use #intro, which is an ID selector. We could even use a pseudo class selector like :first-child and we could even do something like an attribute selector, with square brackets, and then disabled.

The not selector allows a wide range of simple selectors inside. When we finish the exercise, we’ll talk about what can’t be put inside. The other thing just to take note of is there can be no white space between the word not and the brackets. Let’s work on our first simple selector. In this case, we’re going to work on the type selector. If we look down here, you’ll see there’s a div and inside there’s a paragraph, another div and a blockquote. What if we wanted to style these elements, the div and the blockquote, but not the p? We could go back up to our selector and we could
start with div space and then inside, we’re going to put p. This can sometimes make a bit more sense if we put the universal selector there. I’ll use that just to explain what’s going on.

Here we have the div. So the selector, first of all, looks for any div. Then it looks inside the div for anything. Remember, the universal selector means everything. Inside the div, style anything with the color red. Anything, but not the p. This selector is just saying, “Look for any div. Style anything, but not the p inside that div.” If I go back down here and look for our div, and style anything inside that, but not the p. If we go back up here, we can get rid of that style selector first and then have a look on a browser and if I load that up, you’ll see the paragraph is black, but the other two blocks are both colored red.

With the class selector we can write something very similar. We can write div and then :not, but inside here this time, we can write .intro, finding a class. Again, I put the universal selector just to start us off. Down here we have a div and we have three paragraphs: intro, main and then, one without class at all. If we look up here, what are we actually saying? Look for any div and style anything inside that div with the color red, but not anything with a class of intro. Again, if we take that out, it still makes the same sense. Look for any div, style anything inside that div the color red, except not something with the class of intro. We go and have a look on the browser and look at our next one. You’ll see that here we have a paragraph with the class of intro, which is not being styled, but the other two are.

In our third example, we’re going to use the not selector with an ID. Again, we’ll write div, not and inside this time we’ll write an ID of intro. In this case, what’s happening is it’s going and looking inside any div, and it will style anything inside that div the color red, but not anything with an ID of intro. If you look down here, you’ll see the div and there are three paragraphs. One of them has an ID of intro, so these two should be styled and this one should not. Go and have a look at our example, and you’ll see that we have a paragraph with an ID of intro that’s not being styled, but the other two paragraphs are.

The fourth type of selector we can put inside the brackets is a pseudo class. If I can write the selector very simply, like before, with a div, not, brackets, but in this case, we’re going to put in a pseudo class. One example would be first-child. Keep in mind pseudo classes have a colon in front of them. What’s that going to do? Well, if we put this back in here, remember it’s actually going to look for a div, then style anything inside that to the color of red, but not the first-child of the div. Let’s go have a look at this div, and the first-child, in this case, is a paragraph. What should happen is it should style these two, but not this one. Let’s go up to the top again and just check this out. We’ll take out that. So, styling the div, but not the first-child. You’ll see that, in this case, it styled the second and third paragraph, but not the first one.

For our last one, we’re going to use an attribute selector. In this case we’re going to write the rule again, but this time, we’re going to put an attribute in here. Let’s look down here, and we’ll see that inside the div, there are three input boxes and there’s a range of attributes we could use. One way to do it would be to find something like… Well, all of them have an ID. We could do something like, ID, but the problem with that is if we go and have a look at it, none of those boxes will be styled. None of them will have a border of 2px solid red because we’re actually saying, “Look inside the div, but don’t style anything with an attribute of ID,” and it just turns out that all three of them have that attribute. We could be a bit more refined here, and use something like… Now it’s going to go and have a look inside the div and style everything with a border of 2px solid red, but not something with an ID of B. So, this one should be styled, this
one should be styled, this one should not. There we have it. The first and the third one are styled, but the middle one is not.

What can’t you put inside? The first thing you can’t do is you can’t put the not inside as well, so we can’t have a not, not. The second thing you cannot put, at this point in time, you can’t put multiple strings inside. You can’t do two different selectors. That may change in the future, but right now, that is not valid. The last thing you can’t do is you cannot put a pseudo element inside. An example of that would be first-line. That’s actually a pseudo element and in fact, in CSS3, you’ll often see them now written with a double colon. To differentiate them between a pseudo class and a pseudo element, but regardless of how it’s written, you cannot, at this point, put in a pseudo element; it must be a simple selector.

The next thing I want to talk to you about is how you can put variables into this selector to make them more advanced. Up until now, we’ve doing something like div, and then not. Let’s look down below and you’ll see, in this particular case, we’ve got an unordered list with four li’s. The first li has a class of intro. There are two ways we could write that. We could actually write that like this. What is this going to do? This is slightly different to the other one. In the past we’ve been writing an element and then a space. If we were doing it like that, it would actually look for any li and then look inside it for something with a class of intro. If we look down below, inside each li, there happens to be one element with the class of intro. If we put no space between it, suddenly, it’s now looking for a li that is not an li with a class of intro. The difference is, this is looking inside li’s, this is looking for li’s. In this case, it’ll look for any li that is not a class of intro. If we look below, you’ll see this one has a class of intro and these other three don’t, so they will be styled and the first one will not.

For our last exercise, we’re going to put a bunch of nots together. In this case, we might write something like li, not and inside we could put a pseudo class like first-child. What that’s going to do, let’s look down here, we have an unordered list with four different list items. In this case it’s going to say, “Look for any li, but not one that’s a first-child, and then color the rest of them red.” So, these three will be red, and this one will not be styled. Have a look, and as you can see, the first li is not styled. We could actually add to that if we copied that and pasted that, suddenly we’d have not first-child and then, not last-child. What we’re doing here is stringing two not selectors together. If we save that and have a look, suddenly, the first- and the last-child are not selected. In this case, we’re using not and we’re saying, “Not the first-child and not the last-child, make any li the color red.”

There you have some basic introductions to the not selector.

See more video tutorials like this one at Learnable.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.egydes.com Husien adel

    thanks for great tutorial ;)

  • http://www.designcrews.com/stationary.html Stationery Design

    I have done a little work with CSS2, a little bit with CSS3. CSS3 not selector is new element for me in CSS3, as before CSS3 only selectors are used in CSS. RUSS thanks a lot for increasing my knowledge. Tutorial is good enough to learn not selectors completely.

  • http://maxdesign.com.au/ Russ Weakley

    @Husien and @StationaryDesign, thanks for the feedback!

  • http://www.kts.dk frits

    what a lot of info for such a simple thing? and i never had anny use for it, in my work if i want a non selector i just overwrite it?

  • sandie wilson

    Thanks for the great tutorial, it has cleared a few points up that have been confusing me for some time.

  • Michael Morris

    :not is only useful for designer who’ve *not* got a good grasp on how cascading works. You style the global cases, then the specific ones. :not is only real useful when you’re trying to do the reverse.