2.4 Efficient Selection With :matches

Hello, and welcome back to the CSS of the future. In this lesson, you will learn how to make some of your selectors a little more efficient with the use of the matches pseudoclass, and one of the great things about this particular selector is that we can already find some support for it in modern browsers. So if we jump over to CSS4-Selectors.com, we can test out this particular selector to see what browsers are currently supporting it. So if we go over Selector Test and then click on Start Test, we can then scroll down to the CSS 4 section here, and I'm gonna click on this matches selector, and that'll take us to a page specific to the matches selector. And if we scroll down to the bottom, we can see the browser support for it. We can see that Internet Explorer does not support it at all. But some of these other browsers do. And we can see that Chrome, anything version 12 and up is currently supporting this matches pseudo selector. So let's take a look at it. Let's go back to our project files folder. And in your selectors folder you should find a file called matches-start.html. So I'm gonna open that up in Brackets, and I'm gonna go ahead and save it with a new name so that we don't accidentally save over the start file. So I'm just gonna call this match.html and that's the file we'll end up with at the end of this video. And let's take a look at our html. In our body we have three heading texts here, and each one of them has a span inside it. Below that, we have a section which has a paragraph, and inside that paragraph we have a span and anchor tag, and then below the paragraph we have a button. Now I've already written out, I've already spelled out the old way of doing this. This is old school CSS. Very easy to understand if you've used CSS before. We simply have a list of comma separated selectors. Now, each of these selectors, you 'll notice, has something in common. This top section here, for example, we have a section with an anchor tag, a section with a span, and a section with a button, so all three of those selectors have a section in common, and so we're looking for any anchor tags, spans, or buttons that are inside a section element, and we're gonna color the text for those green. And certainly if we go back to our browser, we can see that our span, our anchor tag, and our button all have green text. Also, just below that, we have another selector here that has h1 span, h2 span, and h3 span. So, this one has the second item in the selector in common, which is span. So, we're looking for any spans that are in h1, h2, or h3 elements, and we're gonna color those red, again, as we can see in our browser. So, let's take a look at how we can make these a little more efficient. So, let's take our top one first. So, we want to match any element, any section element that contains an anchor tag, a span, or a button. So we could spell it out like this with three separate selectors, or we can narrow it down to one selector using the :matches pseudo-class. And the way we would do that is we would start off the same way by typing section. And then we're going to type space, because again we are looking for elements inside that section. And we're going to type :matches, and then inside parenthesis we want to match anchor tags, spans and buttons. So we just have a comma separated list of the items that we're looking for inside a section. So it's just a more efficient way to spell out these three different selectors here that have that section element in common. So then we can set our color to green here. And now if I were to save that and change our HTML file to matches.HTML you'll see that nothing changes. Actually, first you need to get rid of this first one to make sure that's not the one that it's reading. So, we'll get rid of that first one and hopefully the second one will still work, we'll still see that text color of green. On any anchor tags, spans, or buttons that are inside a section element. So, again, if we go back to matches.html in our browser, we can see that our span, our link, and our button are all still green. And that's good. So, that's one way we can use it where we have a selector first, and then inside that selector we're looking for any of these three matches. We can also have the matches on the left, or as the outer element. So for example, here we have three different selectors that all have a span inside of them. So we have an h1 span, an h2 span, and an h3 span, as we see here. We're looking for any span element that's inside an h1, h2, or h3. So here, we would have the matches element first, so we would have :atches, and then inside parentheses, h1, h2, or h3, and then we would have space span. And that would give us, The same result. So, again, we're looking for any h1, h2, h3 elements that have a span tag inside of them. So if we get rid of this old version and just leave the new version with the matches in it and save our file, if we refresh our page we should see the same thing. And we don't because we must have messed something up here. And we see that there's nothing wrong here. But in Chrome we're not seeing the results that we're getting. And we need to keep in mind that these are not fully supported yet, but we can support them in Chrome using vendor prefixes. And the way we would do that, it's gonna look a little bit different. Instead of matches, let's just go ahead and just copy this line here, and paste it just below, instead of matches we're going to have c:-webkit-any. Now I'm also going to copy that and paste it down here, let's do our section element space colon, and then I'm going to paste that hyphen webkit hyphen any, accidentally put two colons there, let's get rid of that and then I'll just copy the rest of this. And paste it. So with this hyphen web kit hyphen any that will give us the same result as this matches selector here. So again it's still not fully wholly supported, but we can get to in it Chrome using this vendor prefix here. So let's save that. Go back to our file and now let's refresh. And now we can see that all of those items are now working again. So as you can imagine, the matches selector can really help you to make your CSS more efficient. So hopefully one day we'll be able to use that in any browser and without any vendor prefixes whatsoever. So thank you for watching, and I'll see you in the next lesson