9.7 Advanced selectors - Video Tutorials & Practice Problems

<v Speaker 1>Now that we've put in this navigation menu</v> up here and done some basic styling, it's time to really dig in and add some polish. 'Cause if you look at it right now, for example, I'm mousing over but nothing is changing and that's not the kind of behavior we want. <v Speaker 2>Right and part of that is</v> what we mentioned in the last section, which is a interaction designed affordance here that lets you know that those links do something when you click on them. Previously there was that little underline, but we got rid of that, <v Speaker 1>Right.</v> <v Speaker 2>The default in a browser,</v> is that anything that's underlined has like a little bit of something that happens when you roll over it. Usually it disappears. But if you mess around with links like here or up here, that doesn't happen. So you need to actually think about changing the hover state so that people understand that, "Oh, this is something that I can click on and it'll do something." The reason that's important is that a lot of websites also use the lack of a design affordance to say, "If you click on this, it'll do nothing." <v Speaker 1>Right.</v> <v Speaker 2>So we wanna make it</v> so that when a user rolls over an active link, it changes color. <v Speaker 1>Right and there are several other little bits</v> of polish we'd like to add to this. And this is gonna give us a chance to introduce some more advanced selectors from CSS. And these are mostly new to me. So this is gonna be a great chance for me to learn some things about CSS. So when you mentioned the design affordances, what's the most useful thing in this context, do you think? We talked about maybe we could add in an underline, but that doesn't seem like it would look very good. <v Speaker 2>No, changing color</v> is usually the easiest thing to do in this case. <v Speaker 1>Okay.</v> So let's go back to our CSS and we've got the header nav A here. And so this is the first of the pseudo classes we're gonna talk about, which is the hover state. Now I actually did note this one. So what we do is a colon hover, and then we can change the color when we hover over the link. <v Speaker 2>That's correct.</v> <v Speaker 1>And this color, you just used a color picker.</v> I guess? <v Speaker 2>I just used a color picker</v> and picked something that was, seemed like it was the opposite of the blue color that was there before. <v Speaker 1>Okay. So this is just some hex</v> in case you're wondering, I do not know what this is gonna look like. I can tell that 0, 0, 0 is black, right. I just know that and it's important, but this is not the sort of thing you necessarily would be able to visualize. There might be people out there who can do that. That's impressive. <v Speaker 2>Yeah, sure.</v> <v Speaker 1>It's kinda turn. Oops.</v> Looks like it didn't work though. What happened? Headed out a hover. <v Speaker 2>You saved it?</v> <v Speaker 1>I saved it.</v> <v Speaker 2>Oh, hover over it.</v> <v Speaker 1>Oh right. It's like, why isn't it working?</v> Come on.(speaker 1 chuckles) I need to actually hover over the link. (both speakers chuckle) There we go. Look at that. It actually works. Okay. That's cool. <v Speaker 2>And one important thing to note here</v> is that if you're on mobile, that hover interaction is not gonna do anything necessarily, it's because on mobile, there's only a touch action. Like there's only, it only registers when something touches. There's no cursor. So you're not hovering over something. You're not kind of pausing on it. It's only a click that registers. So for mobile, you want to use one of the other pseudo classes, like Active to make sure that when you actually click it, it changes color so that you know, something happened. <v Speaker 1>Yeah. And it looks like</v> we've future proof that you, you added this in. So a colon active like that. So this is another one of those pseudo classes. <v Speaker 2>Right.</v> And actually before you refresh the page. <v Speaker 1>Yeah.</v> <v Speaker 2>Now if you go back to the header</v> and click on one of those links. <v Speaker 1>Okay. So I haven't saved it yet.</v> So I click on it. <v Speaker 2>And you see for a very brief second there</v> it turned black. <v Speaker 1>Yeah.</v> <v Speaker 2>That's because there's no,</v> there's no active state that's on it. So now. <v Speaker 1>Right. So if I save this</v> and now I click on it. <v Speaker 2>Now, you gotta refresh.</v> <v Speaker 1>Oh (speaker 1 giggles) yes. Come on.</v> Read my mind browser. So now I refresh and yeah. So it stays, looks like it stays orange. <v Speaker 2>Yep. You can see it.</v> It's kind of fading in between there because the operating systems trying to do something special in there, but. <v Speaker 1>That's funky.</v> <v Speaker 2>Yeah.</v> But it's trying to transition, but on a mobile device that would stay orange when you click it. <v Speaker 1>Okay.</v> Now there's another change that you added in and I didn't know about this one. This is opacity. <v Speaker 2>Mm-hmm.</v> <v Speaker 1>So how does that work?</v> Let's just put it in here. This is also okay. So this is actually just on, oh, I'm sorry. This is not on the now this is on the logo. <v Speaker 2>Right. This is gonna be for the logo.</v> <v Speaker 1>For here.</v> <v Speaker 2>Exactly.</v> <v Speaker 1>Okay. So.</v> <v Speaker 2>So what we're doing,</v> what we're gonna do is make it partially transparent. And the reason for that is that we're gonna eventually use an image that is white and it's gonna be on a black background. <v Speaker 1>Ah, okay.</v> <v Speaker 2>And so you can't change the color</v> of an image because it's an image. <v Speaker 1>Right.</v> <v Speaker 2>That's a little difficult.</v> There are ways around that using other file formats, but for an image you can't do anything. So what we're gonna do is change the opacity, which will make it look like it's going from white to gray when you hover over it. <v Speaker 1>Okay. So will this actually do something</v> with the texture? <v Speaker 2>It will,</v> the text will get a little bit lighter 'cause it's on a white background. <v Speaker 1>Yeah. It's quite subtle.</v> There it is. Like that. <v Speaker 2>Yeah.</v> <v Speaker 1>And opacity, there is 50% opaque,</v> 50% transparent and so if we did, like this one would be fully opaque. <v Speaker 2>Right and that wouldn't.</v> <v Speaker 1>So now if I hover over it doesn't change it.</v> <v Speaker 2>And zero would make it disappear.</v> <v Speaker 1>Disappear. Right.</v> Yeah. <v Speaker 2>Another one of those CSS properties</v> where it goes from zero to one, <v Speaker 1>Right.</v> <v Speaker 2>As opposed to some of the other ones</v> that go from zero to a hundred. <v Speaker 1>Then like there's width,</v> which goes from zero to a hundred percent, like where you actually type in the percent, right? <v Speaker 2>Yeah. Exactly.</v> <v Speaker 1>Yeah. So there are three separate ways</v> of doing it. Yeah. So this is 50%. This is 50% and for a width of 50%, you'd actually have to type out percent. <v Speaker 2>Yeah.</v> <v Speaker 1>All right.</v> Well there's another little bit of design polish that you decided on, which was to make the first of these links, the home link, a different color and basically just who invert it so that this starts off orange and then on a hover it turns black just to draw extra attention to the home link. <v Speaker 2>Yep.</v> Sometimes it's nice to give users an idea of where they should click to return back to the homepage. A lot of people, this is surprising, if you're familiar with sites on the internet, you know that if you click the logo, it takes you back to the homepage usually. <v Speaker 1>Right.</v> <v Speaker 2>And you would be shocked at the number</v> of people who don't know that. <v Speaker 1>Don't know that. Yeah.</v> <v Speaker 2>It's surprising.</v> They'll look around for a link that says home. And so if people are gonna be looking around for a link that says home, sometimes it's nice to make that stand out a little different more, so we're gonna make it orange. <v Speaker 1>Okay. We'll make it the same orange</v> as the hover here. <v Speaker 2>And we're gonna use a new pseudo class.</v> <v Speaker 1>Right and so this will be the bottom</v> of the header styles. Now, should we put it under here? Do you think? Or under here, or maybe here, what's a good place to put it? <v Speaker 2>Put it under the initial A,</v> the initial link reference, but it could be before or after the hover states for the links. <v Speaker 1>All right. Let's put it here.</v> The header nav class and what we want here, it's called the first child selector. Right? <v Speaker 2>Hm-mm.</v> <v Speaker 1>So basically what we wanna do</v> is look at this List of LIs and we wanna change the behavior of just the first one, just the first Li inside the header, nav UL. And so that's another one of these pseudo classes. This is the first child pseudo class. So we're gonna use the, the child selector and then the LIs So that's just like up here, but then this syntax with the colon indicates a pseudo class. So first child, and then we want the anchor tag inside there to be this same color. Now this makes me a little unhappy to be copying and pasting this 'cause I feel like I'm repeating myself. <v Speaker 2>This is one of those things where</v> until recently CSS did not support the ability to add variables. <v Speaker 1>Yeah.</v> <v Speaker 2>We mentioned this a couple sections ago,</v> but it does have that ability now in some browser implementations, but it's not fully supported yet. So it's not something you can trust. <v Speaker 1>Yeah.</v> <v Speaker 2>But it will be nice.</v> At some point you could make a variable called like site red or you know, site notice or whatever you want to call it. And you could just put that variable in place and then define the color somewhere else. So yeah. Someday. <v Speaker 1>Yeah. I know there are systems like,</v> like SASS, for example, that do. <v Speaker 2>Without adding a lot more complicated stuff</v> to the. <v Speaker 1>That's a lot of overhead.</v> <v Speaker 2>Yeah. Yeah.</v> <v Speaker 1>All right, so that's now the orange color</v> and these ones turn orange when you hover. But now this one stays the same when we hover. So we should add something for hovering. <v Speaker 2>Yep.</v> We lost our design affordance, so we need to put it back. And so what that first child does is it looks in a parent container, which in this case is header nav. And it sees a whole List of LIs that are inside of that. And it picks the very first one, but it does require that it be in a parent container. <v Speaker 1>Ah, all right.</v> So what I did there, I actually just forgot to add the hover and so cascading. (speaker 1 chuckles) <v Speaker 2>Yup.</v> <v Speaker 1>Created this.</v> So then I added the hover and so now it's like this and if I hover over it should be black. There we go. <v Speaker 2>And the reason why that overwrote it</v> is that it came afterwards so. <v Speaker 1>Right.</v> <v Speaker 2>Good old CSS.</v> <v Speaker 1>You know, I feel like these are like more</v> specific than these ones here. <v Speaker 2>Which one? The first child?</v> <v Speaker 1>Yeah. The first child.</v> Does this make sense to you? <v Speaker 2>Yeah. It still would.</v> That would work. <v Speaker 1>Okay.</v> This makes a little bit more sense to me. And then we keep the logo separate down here, but it's the same, right? 'Cause these don't conflict it all. Right. Cool. The next thing we're going to do is figure out how to add a little visual separator between these links, like a little vertical bar and you might think, "Well, we can just add a bar to the left side of each of these." But then it would put one over here too. And the way we're going to solve this is with another kind of advanced selector called a sibling selector. And there are actually two of them. So we're gonna illustrate both of them. And we're gonna add some text to the main body of the page in order to demonstrate the first one, this one is called the adjacently right. It's a plus sign. Let's add in that text. Let's add in some texts after the H2 on the page. So I'm just gonna and paste. So that's here in default HTML and it looks like we're actually going to add in this H2. Right. We're gonna change it. Okay. And so let's take a look at that on the page. All right. Here's our extra text. We've got this H2 here and then a little bit about learn enough to be dangerous. And then we have a test paragraph is just a second paragraph that will give us a chance to see how to change the styling for the first paragraph here, but not the second. Is that right? <v Speaker 2>Exactly.</v> <v Speaker 1>So that's the adjacent sibling</v> we're going to style this H2 plus P. So what that's gonna do is style the first paragraph after the H2, is that right? <v Speaker 2>And only that one.</v> <v Speaker 1>And only that one. Okay.</v> So we're gonna put this up here in our global styles. <v Speaker 2>And it has to be in the HTML directly after.</v> <v Speaker 1>Okay.</v> <v Speaker 2>So there can't be anything in between them.</v> It's not style the first one that comes sometime later on the page afterwards. <v Speaker 1>Okay. So it literally has to be</v> like the next one. <v Speaker 2>It has to be the next tag.</v> <v Speaker 1>H2 then P so we'll test that.</v> So H2 plus P. So what we're gonna do is we're gonna style just this paragraph here without adding a class. So H 2, and this isn't all that important from a design perspective, but this is a useful selector to know about. <v Speaker 2>Yeah. This actually happens quite a bit</v> on sites where you just wanna make sure that anytime a paragraph comes right after like a header or something like that, it might need a slightly different amount of margin or sizing, or there's a bunch of different reasons why you'd want to use it. <v Speaker 1>Right.</v> Okay. Well, so I'm just gonna add in the styles that we came up with. I'll add them one at a time and just refresh. So this says 0.8 M a little smaller there. <v Speaker 2>A little smaller. Yeah.</v> Making it italic. <v Speaker 1>Oops. I forgot to save.</v> So it's italic size now, margin, top, right. Bottom and then left, which is the same one. So it's also auto so we can omit it. <v Speaker 2>And because there's no set width,</v> it isn't in the center of the page. <v Speaker 1>Right. So we're gonna, that's right.</v> I remember that now, but so we're gonna give it a max width so that it will actually be centered in the page. There we go. <v Speaker 2>And then we'll also align the text</v> to the center so that it's yeah. <v Speaker 1>Oh, right. Okay. So yeah.</v> So now there we go. So now it's really super centered and we can see that the test paragraph hasn't been affected, but if we were to put in say, even like a span. I guess we're doing this one here. So if we did like a, so it should undo all of this formatting, right <v Speaker 2>Pop and its gone.</v> <v Speaker 1>Yep. And it's pretty good.</v> So that's because this is, the span is now the next HTML element in the file rather than a paragraph. <v Speaker 2>Exactly.</v> <v Speaker 1>Got it. So if you get rid of it, that'll work.</v> Cool and so now for the other kind of sibling selector, the general sibling selector, and this. <v Speaker 2>You can actually put that span back.</v> <v Speaker 1>Oh, what's that?</v> <v Speaker 2>You can actually try</v> putting the span back now. <v Speaker 1>Okay.</v> <v Speaker 2>And now let's take a look at the general</v> sibling selector which. <v Speaker 1>Okay.</v> <v Speaker 2>Instead of a plus is a til day.</v> <v Speaker 1>Okay. Could you use a til day here.</v> <v Speaker 2>So if we change that and now save.</v> <v Speaker 1>Okay.</v> And now it's gonna be, oh, I see all the paragraphs. So now the test paragraph is also styled the same way. <v Speaker 2>Right. And the hay is that span with hay,</v> <v Speaker 1>Right.</v> <v Speaker 2>Is still there</v> but also notice it's not affecting anything that's in the bio boxes. <v Speaker 1>Right.</v> <v Speaker 2>Even though those do come after the H2</v> on the page, you might think that it would affect those. But the general sibling selector requires once again, that it be in the same parent wrapper. So once you go down like another level into another parent with children, then that no longer applies anymore. <v Speaker 1>Okay. So this is the kind of thing</v> that we are going to use to put in this vertical bar. Right? <v Speaker 2>Exactly.</v> <v Speaker 1>So what we're gonna do is say that,</v> well, how's it gonna work? So this is pretty tricky. Let's go down to the header nav. <v Speaker 2>So in the header nav,</v> what we're gonna do is we're gonna target only child LIs that come after other LIs in the header nav. <v Speaker 1>Okay. So 'cause that way it will target</v> these three, the nav one, two and three, but not the home link because that doesn't come after an Li. <v Speaker 2>Right.</v> And it also won't target any LIs that are sub navigation or sub menu. <v Speaker 1>Okay. Where does this go?</v> Do you think? Does it go after this? <v Speaker 2>Yeah.</v> <v Speaker 1>The hover stuff like here.</v> And then we're gonna use our Tilda again and then we will give each of them a border. Is that the plan? <v Speaker 2>Exactly.</v> <v Speaker 1>A border left on the left. On the left side.</v> So that the left side of each of these will have a little border it'll be a little vertical line. <v Speaker 2>Yep.</v> And we'll use a RGB value for this so that it's partially transparent. <v Speaker 1>Ah, yeah.</v> Yeah. We talked about this when we talked about color. So instead of one pixel solid black or something like that, we're gonna do RGBA and then, well, it is gonna be black. Is that right? <v Speaker 2>Correct. It'll be black. So.</v> <v Speaker 1>Zero, zero.</v> Remember, these are between zero and 255, instead of hex like these, which are, these are hex. This is between zero and 2 55 in hexa of decimal. This is in decimal. So it would be like this, and then we're gonna make it black, but we're gonna have it be partially transparent. Right? So 0.3. So is this 30% solid or 30% transparent? Which direction does it go? <v Speaker 2>Well, one is completely solid. Completely.</v> <v Speaker 1>So this is like pretty subtle.</v> <v Speaker 2>Exactly.</v> <v Speaker 1>Okay. And so you can see it's it's right up</v> against the nav links here. So that doesn't look good at all. <v Speaker 2>No.</v> <v Speaker 1>But it's working.</v> So what we need to do is just put in a little padding on the left side of each of these. <v Speaker 2>Yeah. And that'll move link away</v> from the edge of the LI. <v Speaker 1>Make it a 1m.</v> <v Speaker 2>And then that also equals the</v> 1m margin left. So everything has the same space now. <v Speaker 1>Oh right. Yeah. I was gonna say,</v> how do we make sure that the spacing is right? It's because this 1m, where's the other 1m? It's here, is that it? <v Speaker 2>Yup.</v> <v Speaker 1>Right. So there's a left margin</v> on each of them. <v Speaker 2>I would actually move this</v> what we did right up after that child LI. <v Speaker 1>Okay. So you wanna do this here?</v> <v Speaker 2>Yeah.</v> <v Speaker 1>Yeah. That makes sense like this.</v> Ah. Yeah. That's a better location. Great. Yeah, just logically, that makes a lot of sense now. And now we can really see that these ones are the same. But again, this is the sort of thing that as a programmer slash math person, I really wanna make this a variable. So like it's explicit, these are the same, but you know, someday. <v Speaker 2>Some day, someday, very soon.</v> <v Speaker 1>Yep. This looks great. Look at that.</v> So it's really nice, subtle. And the gives us a visual separation between the different links. All right. Well, that's come together pretty well. It's time now to take a look at this other part of the header, the logo, which is currently rather unpolished, but we're gonna change that.