Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
The negation pseudo-class selector is almost in a class by itself. Unlike other selectors the negation pseudo-class selector target elements based on what they are not instead of what they are. Confused? Well, to be honest, this is a selector that might take some time to wrap your head around. So let's take a look at the syntax and see what it can do for us. Much like other pseudo-class selectors, the negation selector starts with a simple selector with the not pseudo-class attached to it. Unlike other selectors, however, the negation pseudo-class selector then accepts an argument to be passed into it.
You can see that here inside the parenthesis. The selector then uses the argument to filter the results and target all elements not represented by their argument itself. Since that probably didn't make that crystal-clear, let's take a look at an example. Now, here's a negation pseudo- class selector that targets div tags. However, instead of targeting every div tag, notice that we were passing as an argument the class caption. So in this case the selector would target every div tags except for the one with the class caption applied to it.
And it's worth noting that there are variations on the syntax as well. If you want to group multiple arguments together, you simply daisy-chain them together with no white space between them. Arguments passed to negation pseudo- class selector can be any simple selector, including attributes selectors and other pseudo-class selector themselves. However, you can't pass pseudo-elements or other negation pseudo-class selectors. So you can't do a not inside of a not. That's kind of like dividing by 0. You don't want to do that. Now specificity is another thing that you want to watch out for.
Obviously, if you ever need to use a negation selector, you're probably needing to target a very specific set of elements. Now this can be overridden by rules with a higher degree of specificity. To count a negation rule's specificity, the selectors prior to negation selector and any rules in the argument all count toward the rules specificity. The negation pseudo-class itself however doesn't count. Now support for the support for the negation pseudo-class selector is fairly widespread. However, Internet Explorer's lack of support would require you to target elements in another way for it.
I should point out that while Opera is listed as supporting the negation pseudo-class selectors, in my own testing I found the results to be a little mixed. So I would test thoroughly before deploying this within your own style sheets. With all that out of the way, let's give the negation pseudo-class selector a try. So here I'm previewing the gallery. htm file, which can be found in the Explorer's directory. I have got this gallery where I have a featured image and then I have some thumbnails, which will apparently eventually link you to a gallery with those sets of images.
The problem is the default styling for the images are working for the thumbnails, not so much the main photo here. You can see it's still kind of an inline image, which is causing some problems with the text there. I like to do something a little bit more to it than just that orange border or something to sort of set it apart a little bit. So in order to do that, we are going to write a negation pseudo-class selector. So here we are in the gallery.htm file and again that can be found in the 0206 Explorer's folder. I am just going to go ahead and write the selector directly in the embedded styles on the page.
So just after the last selector, but still within the style tag, I am going to type in #mainArticle img, and then my negation selection, so not(). Now the only reason I am doing that is just to get the rest of the skeleton of this out of the way. So I am opening and closing the curly braces. This is just our basic structure for the negation pseudo-class selector. Now inside the parentheses of the negation pseudo-class selector I need to pass an argument. If I go down and take a closer look at these images, I can see that the thumbnails all have the word thumb in their alt tags.
Isn't that convenient? How very nice. I am fond of telling people demos are designed to work. But you know what? If you're really paying attention to that what you're doing when you create your site, this is definitely something that you could be consistent with. I am going to have thumbnails. They are going to have the thumb word in the alt tags. Of course, our main image doesn't have that. You can see that this main image up here does not have thumb inside the alt tags. So there is our hook. That is what we can check for. So I am going to back up to the CSS up here and inside that negation pseudo-class selector I am going to type in an attribute selector.
So in bracket notation, I am type in alt*= because I just want any particular literal string that has that word thumbnail and I want that to be used. Then I am going to pass the thumb string. Then don't forget to close yours square brackets there. So essentially I'm passing in that attribute selector that's looking for any particular main article image with an alt attribute that contains the word thumb. So how we are going to style this? With magic. I am just going to paste in my styles.
Now the reason I'm doing that is because watching me type is boring. We also haven't talked about a couple of these selectors that I am going to be using here. Now we will get to those a little bit later on, such as border image and border radius. We will talk about all those a little bit later. As it is, just pause your video and go ahead and copy these line for line, or you can find the code in the finished files and then copy and paste it as well. That's just a lot quicker than sitting here and watching me type that, I'm sure. So I am going to go ahead and save that and then I am going to preview that back in my browser. For this particular example, I am previewing in Safari.
No reason other than the fact that we haven't really used Safari yet. Let me go ahead and refresh this. You can see that our main image styling is totally different now. I am getting a nice sort of border around it, the beveled border. It's displaying as a block level element. So the text is being pushed down on the line that it is supposed to be pushed down to. Now there is a good bit of difference between the styling of my thumbnails and the main image itself. Now again, this is all happening because it's basely saying, hey, find any image in that main article that does not have the alt attribute, so it contains thumb.
So a very, very specific selector to be sure. Now more than likely you won't find yourself using the negation pseudo-class selector a lot. I've got to be honest with you. Sometimes it's a stretch to figure out when you can use it. However, it is an incredibly handy selector to keep in mind, sometimes in those last-ditch efforts. That's the one that's going to come through. It's especially good for filtering out which elements receive styling based on element attributes or selector types when you have one or two elements that just don't meet the criteria of everybody else.
So have fun using the negation pseudo- class selector and again, remember there is lack of support in Internet Explorer. So, again, it's probably something I would use for enhancing my styles rather than presenting the main styling for that particular element.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.