2.1 The Negation Pseudo-Class

Hello and welcome back to the CSS of the future. Over the next few lessons you're going to explore a few of the level four selectors that you can hopefully look forward to using in the next couple of years. Now some of these selectors, at the time of this recording, have very limited browser support. Especially the first selector that we're going to take a look at in this lesson which is an updated version of the negation pseudo class, or the not pseudo class. So if you open up your project files folder, I want you to navigate into the selectors folder, and we're gonna take a look at this negation start.html file. And you can see that opened up in our browser here. It's a very simple HTML file with a header, and then a paragraph with some links in it. And I'm gonna drag this down to my Brackets software, which is my text editor of choice. And again, here we can see a very simple HTML file. In our body, we simply have an h1 and then a paragraph with a few links in it. Now I want to take a look at the links here. Now for the most part, they're all the same. They're all anchor tags with an href attribute, but a couple of them, like the first one here, have different attributes added to them. So this first one has a rel attribute and it's set to external. And this last one has a target attribute of _blank, well before we get to the updated level four version of the not selector or the negation pseudo class, I wanna take a look at what we can currently do with that pseudo class in CSS3. So we can use the not pseudo class to target a selector that does not meet a certain set of criteria. So, for example, the way we would use this, is we would first type in the selector we want to target, which is the, in this case the anchor tag, so we're going to type in a. And then we're gonna use colon not and then in parentheses, we're gonna put our criteria that we want to ignore. So if we want to select all links here that do not have a target of _blank, then we can do that using this not selector. So this will select all the anchor tags except for that one. So inside the parenthesis for this, we can point to all items with a target of _blank. And the way we do that is we type square brackets and in the brackets we would type target="_blank". So there's our selector and inside that selector we can do anything we want to. So let's say we want to change our text color to red for some reason for all links that do not have target="_blank". Let's see if that works. So I'm gonna save this as, and I'm gonna save it as simply negation.html. That's gonna be the final file that we're gonna deal with at the end of this lesson. And I've already got one there, so I'm just gonna save over it, and then let's test that. So I'm gonna go back to my browser, and here's what it looked like before. Now I'm going to get rid of the -start, and here's what it looks like now. So we can currently use this not selector, or this negation pseudo-class, to a certain extent. We can target a specific item that doesn't meet a certain set of criteria. Again, as we've used it here, if we go back to brackets, we can target all anchor tags, that do not have this specific criteria. And again, the criteria that you're gonna put in the parentheses there is simply gonna be another selector. So, we're looking for this selector that does not contain this selector or an anchor tag that does not have a target attribute set to _blank. Another thing we can currently do in CSS3, is we can chain these not selectors together, so after the end of this let's say that we wanted to target everything that did not have a target attribute of _blank, and that did not have a rel attribute of external. We could chain those together, so at the end of this selector here, just after the closing parentheses. We're not going to put a space there. Where just going to type :not again. And then inside our parenthesis, we're going to point to the attribute rel, with a value of external. So we can chain those two together, and now we can select all anchor tags that do not have a target of _blank, and do not have a relationship attribute of external. Well let's save that, and see what that looks like. We'll refresh our page. And now we see that the first item has been set back to the default color of blue. Now remember this first one had the relationship attribute, and it was set to external. This last one has the target attribute and it's set to, _blank. So, we selected all of the links that do not have those two attributes and we turned them red. Now, we can do something similar according to the level 4 specification that isn't quite supported yet. So, let's jump back into our CSS and talk about how we would do that. So, the way we would do that, we can combine two different negation pseudo selectors, or two different not statements here. We can combine those into one. And it's gonna be very easy to do once it finally gains support. And the way we would do that is we would still type a :not. And then inside parentheses, we would simply include all of the selectors we wanted to negate, separated by commas. So then we could type target=_blank here. And then, after our closing square bracket there, comma, space, and then rel="external". And then we could type in whatever rules we wanted here. So we could set color: red. And ideally, once this starts working, once browsers start supporting this, this will give us the same result as what we currently have available to us up here, by chaining these not selectors together. So as you can see we can make our CSS code a little bit more efficient, if this particular pseudo class does get updated in the future. Now again, as I mentioned, this current syntax is not supported in any major browsers. I don't know if it's gonna happen soon. I don't know when it's gonna happen. But as of the time of this recording, I can't really test this and show you that it works because it doesn't currently work in any browsers. So all I'm gonna do for now is I'm gonna comment out the one that is working. So that you can just see this by itself. So grab this top on the CSS 3 version. I'm just gonna go to edit toggle line comment. Several comment that went out and this one will hopefully be the one that were able to use someday in the near future. So thank you for watching, and i'll see you in the next lesson.