This course may contain valuable CSS information for reference, but does no longer reflect our course quality standards.
Transcript from the "Negation, Matching & Parent" Lesson
[00:00:02]
>> Estelle Weyl: Okay, so let's cover some other logical combinators, including negation, which you've seen me use, matching and parent. So you've seen me type this a few times. What does it mean, :not? It means not whatever is inside the parentheses. So this matches any element that is not also matched by s1.
[00:00:28] s1 is a selector and it's a simple selector. By simple selector, I don't mean easy selector like e f. That's actually a combinator, no combinators. A simple selector is like nth of type 27 n+3. That's a simple selector. There's no spaces, there's no combinators. So you can say, if you want to do everything but the first five list items, you could do e, not first of type of e, or nth of type 2 e, right?
[00:01:07] So that'd be one way of doing it. So it basically matches any div that does not have the class of excludeMe. So this basically excludes everything that says it has a class of excludeMe.
>> Estelle Weyl: So specificity. The specificity of not is, it doesn't have any specific weight. The not itself doesn't have any specificity.
[00:01:34] Whatever is inside there is what gives it the weight. So here the .excludeMe, you would have 010 for the excludeMe, and 001 for the div. So that would be a 011. If this had been a pound sign, all right, it would be,
>> Estelle Weyl: 101, because 100 for the ID and 001 for the div.
[00:02:09] Does that make sense?
>> Estelle Weyl: Okay.
>> Estelle Weyl: Has been supported for a long time.
>> Estelle Weyl: Not supported yet, or actually just in Safari is saying many things. So you can put a list of things. So we could have done, E:not nth of type 1 or nth of only type, that kind of stuff.
[00:02:32] Still they have to be simple selectors, so no combinators within them. But you can put as many as you want, and that will be supported. Safari is supporting it already. So it will match any div, except for the ones that have either the classes excludeMe or excuseYou. You could also have written for right now, you can do,
[00:02:57]
>> Estelle Weyl: And string them together, that works.
>> Estelle Weyl: So let's take 60 seconds to just play with this. Play with it on your own, but I'm gonna do it up here. So all of them have the color of blue to start with. And then, all of them change to the color red, except for if it's the first child, which would also be the first of type.
[00:03:25] And here, I can put
>> Estelle Weyl: nth of type 2n. And that actually matches then every, I basically send don't match any even ones, just match the odd ones. And then I could do +1 here and that still matches. But I could not do,
>> Estelle Weyl: li, that is a child of an li because that has a space in it.
[00:04:00] And that means that it is a complex selector. Even though it's a really easy selector, right, an li that is a descendant of another li. Or that is the descendant of an unordered list. So you'd think that that would say, any li except for the ones that is the child of an unordered list.
[00:04:20] But that is complex selector, not a simple selector.
>> Estelle Weyl: And you can actually put an attribute in there, so we could say not, well that's a link within an li so I can't do that. Not so let's just do not nth-of-type, 3n
>> Estelle Weyl: And then I need to add one more there.
[00:04:50] Okay, so let's go on to the next one, now that you've played with that a little bit. We don't have matches yet, I don't believe.
>> Estelle Weyl: But matches is going to be cool because it'll match a whole slew of things. So you can say li that matches, and have all of these things that come after it.
[00:05:16] So it's basically using Sass selectors, without producing all that extra cruft because how it basically adds, it puts it all in one line and it doesn't expand it. It's nicely there. Seeing li that matches, it has a title, it has a role, either one and then an a.
[00:05:38] So any a that is a deescendant of the li that has a title or a role. It basically matches this. So this right here is a very simple example. So the second one is actually shorter than the first one. But you can imagine if you had long class names, and 16 of them, or added here.
[00:05:59] We have any, oops,
>> Estelle Weyl: Where was I? Here, so I'll just put every turn in here so I can see it. So, any a that is either focused or active, right? That is nested within a slide, that matches, that is either a descendant of home, an element with an ID of home, or an element with an ID of contact.
[00:06:29] Right, so it's one line that matches these four lines.
>> Estelle Weyl: And let me just get rid of all of this to see if there's anything else. It is supported in Safari right now.
>> Estelle Weyl: So you could actually play with it live, and you can do it if you're targeting only iOS.
[00:06:49] So similar to matches we actually have something that does match. So this is something you can use. What I just explained is that you can't use, you actually can use with prefix, and I do. This is one of those things where because in terms of JavaScript when I want to reach a bunch of elements, I can do it this way.
[00:07:15] So I can use query selector all and match and put these in matches. In Safari, it's matches, in Chrome and Android, it's -webkit-any. And in Firefox, it's -moz-any. So what does this not match? Edge, right? We're not targeting but if you're going to do mobile, who here has a Windows Phone?
[00:07:47] So sad, I feel so bad for them, no I don't.
>> multiple: [LAUGH]
>> Estelle Weyl: So you can actually use matches, but it's prefixed with any for WebKit and Mozilla. So this is basically showing if you just used this, which is pretty simple. It expands out to that, which is not so simple, right?
[00:08:14] So it's a span that's a descendant of ban, bar, or foo, of a link that has either of those classes. And so you would actually have to,
>> Estelle Weyl: And you can put the not.
>> Estelle Weyl: So you can any link other than one that has the class of bam, bar, or foo.
[00:08:36] So match all the links in this entire document, except for ones that have these three classes. So you can put matches inside a not and do really complex things. So the weird thing is, let's say we have foo, bar, and bam, right? What is the specificity of this?
[00:08:58] It depends what is matching. So if it matches, actually, it's basically the highest, cuz in here, it'd be not, right? So the specificity would be one ID.
>> Estelle Weyl: One element and one element. So when you have three things in here, I believe. And I'm not 100% sure, so I would have to double-check.
[00:09:21] But I believe it is the one with the strongest weight, when it's not matching. And when it is matching, it is whatever the weight of the property that is matching. So here if it was bam, it would be matching at 011, and if it was foo, it would be matching at 101.
[00:09:38] Does that make sense?
>> Estelle Weyl: So we were gonna have the reference combinator and it was removed. So I don't know if it is supported anywhere. But that was basically, if you could actually say, find an element that is referenced by the self other element, which would be really good for inputs and labels.
[00:10:01] And would be really good for ARIA, because a lot of times in ARIA, you say labeled by this other thing. And would be good for data lists. Do you all know what a data list is? Okay, so an input, have you ever seen a select and it looks like an input and you have all these options.
[00:10:21] And like Google Chrome, it's like what do I want for? And you think it would say Christmas, but it really is gonna be some inappropriate thing that you can't repeat. Because people search for really weird things online, and most people just fake it when you have those pictures.
[00:10:38] And have you ever gone to Twitter, and you've seen? That's because that's what they search for, because I don't get the same results that they do, yeah. They're just basically telling you what they're searching for. So anyway, that's a drop-down, right? It's kind of like it's an input, but there's a drop-down with options.
[00:10:55] There's a native element in HTML that does that. It is the list attribute on the input, so you put list and then you point it to the ID of a data list. And the data list is basically a series of options but it's not in a select. Instead it's in a data list element.
[00:11:16] And you basically give it all sorts of options, and then when you are on, I'll show you that during the break. It's really cool, and you can basically do that natively in the browser without adding any JavaScript frameworks. So anyways, we don't get that. Instead, we go on to the Parent Selector.
[00:11:38] So originally, it was going to be this and now it is going to be this. Not supported yet, so that could change. But a header that has an h1, h2, basically, a header that has a heading is what this would say, right? A header that does not have a heading, right, header not has.
[00:11:59] So the reason that we haven't been able to get a parent selector is because when I said earlier that things needed to be pre-fixed until they were ready to ship. Performance of checking every element to see what descendants they have, is very slow. So they've never figured out a performant enough way to do this.
[00:12:18] And there is something down there and I can't show it to you, or I could, let me just show it to you here. Inspect, and then go to Slide, and then increase the slide size. So this is an Inspector, I told you I will show you an Inspector.
[00:12:40] And what I wanna do is I wanna increase the size of my slides. So I can actually live change my slides and I just give it a height of 800, okay. So header, contain something that is not a header. So this one says, a header that has something, right?
[00:13:03] It has a child that is not an H1, H2, H3, so you can get really complex with these things. So when you say you can't target something without an ID or a class, yeah you can. I wouldn't do this in production. This is just too complex, but you can.
[00:13:19] You can actually do that. And so let's see if the parent selector is supported yet. Open in a new window. And no, parent selectors are not selected yet. So okay, so we still have to wait a while.