2.2 The :has Pseudo-Class

Hello. And welcome back to the CSS of the Future. In this lesson your going to learn about the relational Pseudo-Class or the has Pseudo-Class. According to the current draft of the level four specification, the relational Pseudo-Class allows you to select elements that have specific types of child elements. In other words, if you want to select all list items that contain an anchor tag with a class of active then the relational pseudo class is the way to go. And this is something that you can already do in jQuery, if you've ever used jQuery before, then you might be familiar with the has method, which just as I mentioned, allows you to select elements a specific type of child element. So, again in this case, we might want to select a list item, that has an anchor tag inside of it, with a class of active. So, for example, we have an unordered list here, which represents a navigation menu. When we have an active item, such as this first one, it's gonna look a little bit different. And right now we've styled the active item, the link itself, but what if we wanted to style the list item around that link? Well, let's take a look at this. If you go into your Project Files folder, Into your selectors folder, you'll find a file called has-start.html. So that's the file I've got opened up in Chrome. And now I'm going to drag this down to Brackets. So in the body of our document we've got an h1 tag and then an unordered list with a class of nav. And each list item is a different menu item in that navigation bar. Then if we scroll up we can see all of the styles that make our navigation bar look like it does right now. So all of our list items here are floating to the left with the display of block, certain background color, et cetera. We can target the anchor tags within each list item. We've given them a color of kind of a light grey color, font weight of bold, et cetera. And then down here we have our active anchor tag which has a color which is basically a much lighter grey color. And you'll notice down here the very first list item has an anchor tag inside of it that has a class of active. So if we wanted to change the background color of this particular list item, there's a few ways we could do it. One way we could do it is we could move this class into the list item itself so we could give the list item a class of active and style it that way. But I don't wanna do that. I wanna leave my markup alone, leave it as is and instead, I want to target the list item that has a child or has an element inside it that has a class of active. So ideally, that would target just that first list item. And none of the rest of these list items because the anchor tags inside the rest of these items do not have this class. So, again, this is another element that's not currently supported in any major browsers as of the time of this recording, so I can't really show you that it works because it currently doesn't work. But I can at least show you what it looks like as of the current draft of the level four specification. So, let's go into our styles here, let's skip a couple lines, and we'll create a new style. And let's go ahead and point to our navs. We'll point to ul.nav or our unordered list with a class of nav. Inside that, I want to target any list item that has an anchor tag with a class of active. So the way we use the has pseudo-class is identical to the way we use the not pseudo-class. So we would type, colon has, and then inside parenthesis we would type in whatever criteria we were looking for. Now, keep in mind the difference is when we use the not pseudo-class, obviously we are using a negation pseudo class, but the other difference is that instead of looking at the current item with the has pseudo-class, we're actually looking for the children of the current item. So we're looking for a list item that has a child element that meets certain specifications. And we want that child element to be an anchor tag, so we'll type a with a class of active. So, again, whatever selector we put inside the parenthesis is not going to apply to the list item itself. It's going to apply to any child items of that list item. So, we're looking for an active anchor tag inside a list item. But, we're actually targeting the list item itself. The list item is what we're going to be setting the styles for. So for that list item, if we wanted to set its background color to a value of #888, we could do that. Now again, If I were to save that, and in fact let's save as, I don't wanna save over our start file. So, I'm just gonna save this as has.html, and I've already got a version of it there. I'm just gonna replace it. And then, we're gonna jump into Chrome and refresh. There is no change. Nothing has changed at all because again this is currently not supported. However, I do have some jQuery. If we scroll up to the very top of this file, I do have some jQuery here that I can at least simulate this effect and show you what it's going to look like. So the first thing I'm going to do is comment out this first line of code here, just inside this document ready function. So this document ready function basically means this function's going to run as soon as the document is finished loading. So I've un-commented this line right here just by getting rid of those two forward slashes. And you don't have to know jQuery to see this, I just want to demonstrate what this is gonna look like. But I'm looking for all ul.navs, that's looking for all un-ordered lists with a class of nav and we're looking for the list items inside that. And then we're using the dot has method in J query to point to any child items that have a class of active. Any child inker tags that have a class of active, and then we're applying some CSS to it. So let's see what that looks like. We'll save it, refresh our page, and we actually need to go to the right page here. Instead of has start, let's jump to has.html. And there we go. So, our first item which has a class of active now has a darker background. And we can change the text color of that as well, we can come down here to, A.active and change the color to something brighter, maybe eee, save that, then refresh. Now we can see that text a little bit better. So our active link now looks different. That's exactly what this particular has pseudoclass would do for us if it were currently supported, which it isn't unfortunately. Now maybe by the time you download this corse and watch it for yourself it might be supported on some browsers. But as of the time of this recording it's not currently supported. And right now, if I were to go back to my file and start clicking on these other ones to try to make them active, you'll see it's not working. We are applying the active class because of some of the jQuery we added. And we know that that's working because our text is lighting up. And if we look at our jQuery we can see that that's happening here. So, we have this click event right here, whenever we click on any of our anchor tags inside our list items. We're going to remove the active class from all anchor tags and then add the active class to whatever item we just clicked on. So we're basically just removing the class of active from any item that might already have it, and then adding the class of active to the item we just clicked on. So that's how we're able to change the color of the text when we click on each one. But then if we uncomment these last two lines of code here, what we're doing is we're setting the CSS so that the, we're basically just setting it again to mimic what we already have up here. Because even though we've added a class of active to another one, we don't have that in our CSS down here. Instead we just have it in a CSS rule up here in our jQuery. So that's not going to hold whenever we change the active class. Instead, after we change the active class we have to apply that CSS again. So now that we've reapplied it by uncommenting these two lines of code we can save it. Refresh our page. And now, we can click around. There we go. And we can see our background and our text changing. So, that's basically how it would work if the Relational pseudo-class or the has pseudo-class we're currently supporting. Hopefully in the near future we will see that supported, cuz I can see that being very, very useful in the future. So, thank you for watching and I'll see you in the next lesson.