Note: There will be free exercise files for most episodes, which will allow you to follow along with author Chris Converse, as you explore all the possibilities CSS has to offer.
Skill Level Intermediate
- [Instructor] Hi, this is Chris Converse. And in this episode, we'll take a look at the CSS not selector. Or more formally, the negation pseudo-class. This allows us to define a CSS rule that will select items that are not part of the selection group. So if you'd like to follow along, download the exercise files and let's begin by opening the HTML file in a text editor. Now, once you have the HTML file open, up in the head area, we have a link to style.css, which we'll be opening in a moment. Inside of the body area, we have a gallery.
The gallery has an h1 and an article. And then inside of the article, we have a div for each one of the different gallery items. Now, some of these items have a data status with a value of new and others do not. So what we're going to be doing is targeting every item that does not have a data status equaling new. Now, you might want to use this feature if you have some established CSS rules in your site and you want to highlight something quickly without redefining a bunch of existing CSS rules, especially if you want to add a CSS rule that's going to be temporary.
So to demonstrate how this works, let's go back to the exercise files and let's open up style.css in our text editor. So once you have the CSS file open, let's scroll down. Let's find the gallery space div selector. This selects all of the individual gallery items. So after this rule, let's hit a few Returns. And what we're going to do is target the div element using our not selector. So I'll type .gallery then a space then we'll type div, then a colon, then the letters N-O-T for not.
Beginning a new parenthesis and then we'll add in our curly brackets. Let's split this open. Next, let's get our cursor inside of the parentheses for the not selector. Let's add in, beginning and ending square bracket to use our attribute selector. And then inside, we're going to type data-status equals, two double quotes, then the word new. So basically what this is doing is it's going through and it's going to select every item that does not have a data status equaling new.
So with that set up, let's get our cursor in our curly brackets. Let's come in here and define a background color. We use the RGBA color space. Put in our parentheses and a semicolon. Then inside of the parentheses, for red, we're going to set this to 255, comma 255 for green, comma 255 for blue. That's going to give us white. Then a comma, then for the alpha, we're going to set this to .25. Next line, we're going to set border color.
And we're going to set the border color to the same property as the background color. So let's come up and copy that value. Let's paste it down here. So with this in place, we can hit save. If we go back to the browser, we'll now see that all of the items that do not have the data status equaling new are being affected by this change. Now, let's go back to the CSS file and let's target the paragraph elements, if they are inside of an element that does not have the data status new. So let's come up here and copy this selector.
Let's paste this in a new rule. Put in our brackets, split this open. Then in the selector, after the div:not with the parentheses let's hit a space and then type the letter p. So now, we're going to target the paragraph elements. Then we're going to come in here and set the color to 40% white. So color, colon, space, RGBA, put in our parentheses, semicolon. 255 for red, green, and blue. And then .4 for the alpha.
Let's hit save. And now, back in the browser, we can see that we're now targeting the paragraph elements inside of every one of the items that does not have the data status new attribute. And so with that, I'll conclude this episode. And as always, thanks for watching.
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.