PB101: L18 – Programmatic Styling With Pseudo Classes (Critical)

Welcome back to Page Building 101. In this lesson, we are talking all about pseudo classes, not to be confused with pseudo elements, which we covered in a previous lesson.

What I’m going to teach you in this lesson is extremely, extremely valuable and very, very powerful. I would say, you know, one of the key differences between being a beginner or even maybe intermediate web designer and a professional web designerwho actually knows what they’re doing.

I work with pseudo classes in web design constantly where beginners don’t even know a lot of these things exist. And that’s kind of the context for this video before we really dive in deep.

Because this is one of those episodes, I will just warn you, you are going to feel like you are getting hit in the face yet again with a fire hose of information. And that’s okay because my goal for this video is not for you to learn these techniques and instantly embed them in your mind.

But to just know that a lot of the things that I’m showing in this video are possible. Beginners and intermediate don’t even know that they’re possible.

So what they end up doing is just throwing up their hands and they just, hey, I’m just building basic sites here, right? A professional knows these things exist, knows how to use them, but when you’re making that transition, just knowing these things are possible allows you to say, oh, I know that that can be done.

I may not know how to do it off the top of my head, but I know it can be done, and then you can look it up and you can get the answer, and that’s what you should do. You should bookmark this video.

And when you encounter situations where it triggers in your mind, Hey, I know that’s possible. Then pull up my video, watch it again, and then you will know exactly how to do it or go to chat GPT or go to somewhere else on Google, whatever you need to do.

But at least you know these things can be done. That is the purpose of today’s video.

So with that, let’s go ahead and dive in. So first of all, what in the world is a pseudo class?

So the first thing you have to know is that elements in web design, right? They exist in various states.

So for example, like most common, easy example, a button has a normal state when it’s not being hovered on, and then it has a hover state when the mouse is hovering over it. And as you probably know, we change the style, the styling of a button based on its state.

We have a normal button style, and then when it’s hovered, the style changes and we can change the style however we would like. And that’s done, by the way, with a pseudo class, in this case, the pseudo class hover.

And then I can actually zoom in for you live dynamically. All right.

So you see right here we have button and we have a colon and then the word hover. We also have button and a colon and the word focus.

These are two examples of pseudo classes. The button colon focus allows us to style the focus state of the button.

And we’re gonna go down and we’re gonna do plenty of examples. Right now I’m gonna do hover.

We’re not gonna do focus until a little bit later in the video. But we’re gonna take this button right here and we are going to style it and then we are going to determine what the hover style difference should be.

Note by the way before we start that pseudo classes only have one colon and pseudo elements have two colons. That’s right now at least.

I know they’re thinking about changing the standard, but right now that is how you determine the difference between the two things. Okay?

So I’m going to go to this button right here and we are going to style its normal state. So I’m just going into the panel like I always would.

You could ignore the fact that I’m not doing this on a class. We’re just isolating this to how does a hover pseudo class work.

Okay. So I’m going to go into my backgrounds color and I’m just going to choose this danger color and then I’m going to go to my typography and I will probably, let me just choose white here.

Okay. So we’ll come down and we’ll choose white.

There we go. And we don’t really need to do anything else.

Okay. So let’s go look on the front end at this and we clearly have a button with a red background and white text.

And what we want is when we hover over this button, we want to change the background to black. We don’t even need to change the text.

The text is going to still look good when the background is black. So I’m going to show you how to do this, not with the actual builder controls.

You can do this with the builder controls, but people using a different page builder, it’s going to be a different process, and I’ve been very critical of the pseudo classes area inside of Bricks. It’s one of the worst areas of Bricks in my opinion.

It’s way better and way easier in fact when you know what you’re doing to just write the CSS for this, okay? So I’m going to zoom into the CSS box and I’m going to type the word root, which as you know just references the element that we’re currently working on or the selector that we’re currently working on.

And then I’m going to put a colon. I’m going to write the word hover.

And now suddenly I am styling the hover version of this element. And I can simply say, I want the background color to be black.

When we hover. Now notice the button right here is not black.

I don’t see what I’m actually doing. Why is that?

Because I’m not actually hovering the button. I’m not in that state, right?

So if I hover though, I will suddenly see that the style is taking effect. If I take that code out, there is no hover style.

See, and then when I put that code back in, there is in fact a hover style. It’s as easy as that.

That’s a hover state. That’s a hover pseudo class.

It doesn’t really get any easier. Trust me, we are going to get deep in this episode, okay?

So with that said, let’s go ahead and let’s keep going. So we can come down here.

You know, I said that a pseudo class is about the state of an element. You can also think of pseudo classes as defining a condition or a specific context that an element might be in.

And this takes us immediately into the deep end of things. Like we went straight from the shallow end to the deep end.

And a lot of you are gonna start gurgling in just a minute. Like you are going to go under very quickly and it’s okay.

It’s okay. I am your lifeguard.

I am with you on this journey. I will stay right here.

I’m going to give you a little floaty, okay? As long as you’re with me, as long as you’re with me, you’re good to go.

Just don’t drift too far away. All right?

So one of the most powerful and often used pseudo classes is the nth family of pseudo. This is an entire family of pseudo classes.

And this pseudo class allows you to style specific elements within a group of elements. What we’re gonna take a look at first is first child, last child, and the most basic iterations of inf child.

And what we’re gonna do with this grid right here is we’re gonna style the first image, we’re gonna style the second image, we’re gonna style the last image. And we can do this with those pseudo classes that I just mentioned.

So what I’m gonna do is I’m going to take the group, okay? We wanna select the group.

We’re not selecting individual things in here. Remember, this is like a programmatic fashion of selecting elements, right?

Obviously, I can just click on the first image and I could style it. Right.

Um, in fact, let me show you that right now. All we’re going to do for styling, we’re not doing anything crazy.

We’re just adding a border to things so that we can see what’s going on. So I’m going to add a five pixel border manually to this image right here.

And we’re going to make it a, um, let’s, let’s make it a danger border. Okay.

So we can color it with danger. Now I’m going to go to the front end.

Let’s scroll down and look at that. See, people will say, Kevin, Kevin, Kevin, you just click on it, why are you making things so easy?

You’re over engineering this stuff. Why don’t you just click the first image and put a five pixel border on it and you’re done and we could call it a day, right?

Well, does that actually accomplish what we want? What I want is I want the first image in this grid to have a five pixel danger border, which it appears that’s exactly what we did until the situation changes.

Now if you know me and you know page building 101 you probably know that I’m a big fan of scalability and maintainability and unbreakability and because I use things like dynamic data and I use conditions and I use query loops and I build pages dynamically rather than statically, you would know that this situation may change, right? Where this image, in fact, may become the first image in the grid.

And I’m going to go ahead and save, and I’m going to refresh, and now you see we have a distinct problem. Distinct problem.

What once was the first image and had the border that I wanted it to have is no longer the first image. And now it still has that border, which is quite awkward because I said, our situation called for the first image having a five pixel border.

And when that, when this was the first image, that was fine, but this ain’t the first image anymore. Okay.

We’re in a different situation now. And the situation has not adapted.

We have created a broken situation, right? Whereas if I use not a static method of styling, so let’s go ahead and get rid of that border.

Let’s use a dynamic method or a programmatic method of styling. I’m gonna go into CSS land right here.

Again, I have, let’s turn that off, I have the entire grid selected. And what I’m gonna say is I want you to select any direct child, okay?

And let’s just start there. Cause you guys, this is a refresher, right?

This says select any direct child of this container. All right.

So I’m going to put a border of five pixel solid danger, right? And it’s going to put a border on all of them.

Let’s go ahead and take a look. Awesome.

Now, remember I said, I only want the first one to have the border. So I’m going to put my single colon that is for a pseudo class and I’m gonna say first child and I’m gonna hit save and we’re gonna go to the front and now the first child has the five pixel danger border.

The difference, the difference, the difference is that this is dynamic. It responds dynamically to changing situations.

So I’m gonna take this second image right here and remember it’s the girl hitting the bag. I’m going to move her to position number one and look who has the border now.

This image and look who doesn’t have the border now. This image, the situation changed, the programmatic nature of that instruction adapted to the changing situation and I still have exactly what was called for with our styling approach, okay?

Now this is an actual requirement. Remember with query loops, you’re dynamically building a grid with a query loop, there is only one element.

There’s only one element, one physical element in that grid. The rest of the elements have been generated dynamically.

There is no selecting of other elements manually. You have to understand programmatic styling of elements.

Okay, and this is exactly what this allows you to do. So just like first child, I can say, no, no, no, I want to actually select the last child.

Okay, so we’re just going to write last child instead of first child. And now my last child actually gets the border.

Now, what if I want a the second item in the list, right? So this is where we can just specifically say a number, you can call out an element by its order in the group, right?

And we do this with inf child, and then open parentheses, and I simply put the number. Now I can do one, and that will do the first child.

I can do three, and in this case, that would be the last child, but what if this grid gets four, five, or six? That will not be the last child anymore, right?

That’s where last child comes in very handy. But if I just put a two in here, okay, and we can zoom in even more, you’re gonna see that number two is in fact selected.

Okay, so this is first child, the basics of inf child, and this is last child. Now, there’s also something called inf of type, not inf child anymore, inf of type.

So where inf child allows you to select any element based on its position, inf of type only selects specific types of children also based on their position. So in the grid below, we have a new grid now that has six images instead of three.

Three of these images are wrapped in a figure tag. Three of them are not wrapped in a figure tag.

Visually, you have no idea which ones are which. The question is, can we figure out which ones have the figure tag?

Okay, that’s easy. But then can we select like the first figure tag or the last figure tag?

Is that a possibility? What happens if we select the second image that is wrapped in a figure tag?

Okay, let’s take a look at how all of this behaves. So first of all, can we just select the first figure tag?

So I’m going to come down here and I’m going to say root and I’m going to say figure nth of type. So I’m saying the type of thing that I want to select.

I want to select figures, but then I’m saying I want to select a certain number of them or one in a certain position. All right, now I’m going to leave this blank.

Actually, what we’ll do just to step ourselves forward, right, let’s just put a border. Let’s just find the figure elements, okay?

So I’m going to say border five pixel solid danger. Okay, perfect.

There’s our figure. We just found our figure elements.

There’s one in position two, there’s one in position four, and there’s one in position five. Okay, now let’s say can we select the first of that type, the first child of this group, it selects the first figure element in this group.

If I say select the second one, okay, replace the 1 with a 2, it will select the second figure element, which is actually the fourth child element, but it is the second figure element. And then I can do three right there.

Okay, so I’m able to select the various numbers of figure elements, right? Can I do the last figure element, right?

So I can say figure last of type right there, and I just take away the, I don’t need numbers anymore because last is last. Okay, so select the last of type figure element, and now I have selected this one, which is not the last child of the group, it is simply the last figure element.

That is the difference between inf child and inf of type, of which, you know, first child and last child and first of type and last of type are in that family all together, okay? Awesome, all right, let’s continue going.

Again, I told you, little bit of a fire hose, you can always rewind, you can always go back. We’re gonna keep going.

And my friends, my friends, it’s going to keep getting deeper. Okay, if you feel the water is like, you know, it might even be over your head right now.

It’s going to continue getting deeper. This is why this is like an ocean, basically, that we are going to be swimming in today.

All right, so guess what? We just counted four words.

Like, hey, show me the second one, show me the fourth one, show me the what. You can actually count backwards as well.

Now there may be situations, not always, it’s not super common, but there may be situations where you have to count backwards instead of forwards. And again, this is one of those things where it’s just you need to know this is possible.

You don’t need to memorize it or anything like that. You don’t need to be an expert at it when you wake up tomorrow morning, but you have to know it’s possible.

Because if you don’t even know it’s possible, you can’t even look it up, right? Okay, so here we go.

Int last child, int last of type. We’re gonna basically do the exact same thing.

I’m gonna leave the border five pixel solid, danger, okay? So we’re gonna say, int last child, parentheses, and I’m gonna say two, okay?

And by the way, we’re back up, we’re still in this grid right here. I know I was gonna use this grid, but I was already here in this grid, so we’ll just keep using this grid.

So I’m saying, hey, select the second one, but I’m saying the last, from the last one. So int last child is two.

It doesn’t select the second child in the group, it selects the second from the last child. Okay, so anything you can do with inf child, you can do with inf last child, and it’ll just go in reverse.

Anything that you can do with inf of type, we’ll do the same thing in reverse with inf last of type, okay? So there you go, it’s selecting the figure that is the second from the last, not the second from last child, right?

But the second from last figure element, which is this one, because the other figure element is right here. Okay, so that is counting backwards.

Now we also have, when I say that this is programmatic styling, much more, you know, complexity involved in that programmatic nature. So there is a formula that we really need to know and now I’m gonna go ahead and get rid of that.

We’re gonna come down to this area right here and the formula is A in plus B and I’m going to try to make this very simple for you okay so the placeholder in allows you to programmatically select elements within that formula where A is a multiplier, in is the selected child and B is an offset value. So what we’re going to do is just try various examples so that you can see exactly how this works.

So for example if I wanted to select not just the third element but every third element I would say inf child 3 in right. So let’s see what 3 on its own would do.

I think you already know like if we did a little pop quiz here right. So I’m going to say root select everything.

Let’s start there. Let’s build it up right.

So we say not background. We’re going to say border five pixel solid danger.

All right so that selects everything. We got that right.

But I only want to select the third item. But I don’t want to just select the third item.

I want to select every third item. And so now I say, remember, 3 is the multiplier.

3 times 1 is 3, and it’s going to keep going, okay? Which gives me 3 and 6.

And if I continued to build out this grid, it would also select nine. You see how all three of those now have a border on them.

Okay, we’ll leave it as nine items. I think that will be very helpful.

Okay, so let’s go back and let’s try something different. What if we wanna select every third element, but we wanna start counting from element number two?

Well, this is where the offset comes in. See, right now we have A, B, I’m sorry, we don’t have it, b.

We have a, n. Now we need a, n, plus b because b is our offset.

So if we want to create an offset in the programmatic nature of what we’re doing that’s where the b comes in. Okay so we are gonna say I want to start every third element which we already have starting from our our offset is the second element.

Okay now in this case we are selecting all of the same things. But what if I wanted to select every fourth element starting from the third element.

Okay so it’s going to select the third one and then look one, two, three, fourth element selected. Now look I’m gonna make this grid go even bigger.

There it is again. So starting from the third element 1 2 3 4 1 2 3 4 every fourth element starting from the third element.

Let’s go back and take a look. Every fourth element starting from the third element.

This is how the formula works. Let’s try another one.

Select only the first four elements. Oh my gosh, can we do negative ins?

A lot of people don’t even know this. And again, if you don’t know it, you don’t even know it’s possible, you can’t even look it up.

Right? Now you guys are opening your mind to what’s actually possible here.

Okay? So inf child, I’m going to say negative in, right?

Which this would be like, here’s our multiplier is a one, but you don’t need the one. And then we’re going to say plus four.

And there is the first four elements right there. Now what if we want to select only the last four elements?

How are we going to do that? And why does it say we use the same formula?

That seems a little confusing. What is it like magic or no, we have to combine one thing we learned just a minute ago, right?

How did I say you go backwards? This is one of those situations where you actually have to go backwards.

We’re gonna say inf last child, and now look at that, we’ve selected the last four elements. So now we’re combining, here was from the inf family, still in the inf family of things, the concept of inf last child with selecting only a certain group of elements.

Okay, what else? Can we select all even or odd elements using even and odd presets?

Wait, wait, wait, there’s presets for these things? Like I can select all even elements with a formula.

I can select all odd elements with a formula, but I don’t even need to do that. Watch this, I can say inf child, and I can simply write the word even.

And it’s going to select all even elements 2, 4, 6, 8, 10, 12 and so on and then if I want to switch it I can say no no no no no let’s select all odd elements 1, 3, 5, 7, 9, etc. Programmatic styling of elements is insanely You have to understand how the nth child, an nth of type family, I just call them the nth family of pseudo classes, work.

And get really, really, really good at them. And start using them more and more and more.

Stop doing things statically and manually and start doing things programmatically. Okay, but wait, but wait my friends, there is more.

You can combine multiple int statements together to create hyper specific selection patterns. So if one formula doesn’t do everything you need just add another formula, right?

What if I want to select the first four elements and the last element? You can’t do that with a single formula, right?

So let me go back. We’re gonna say int child minus n plus 4 and that is going to give us let me let’s bring this down to this box now okay we’re moving down the page so I’ve just selected the first four elements right minus n plus 4 gives me minus gives me a negative number plus 4 okay gives me the first four elements now what about that last one what about that last how am I gonna get that how am I gonna wrap that in to this instruction right here all I’m going to do is put a comma and then I’m going to duplicate the selector and then I’m just going to change the instruction, okay?

And in fact, I don’t even need an int here, I just need the shortcut last child. And now I have the first four selected and I have the last child selected.

This is an example of combining int statements together to create your own unique little custom programmatic selection of elements. Okay.

Again, absolutely critical that you know this is a possibility that your mind is open to doing this because I don’t want you to get in a situation where you’re like, I got to do this and this, ah, and you just throw up your hands. Like, I don’t even think that’s possible.

I don’t even think that’s possible. Well, in fact it is, if you just combine two formulas together, three formulas together, four, there’s no limit to this.

Okay, all right, let’s keep going. You can also select elements where, by the way, we’re getting out of Inthville now.

All right, so for those of you who are drowning in Inthville, we are moving out of Inthville now and we are moving into Knotville, Knotville, okay? You can also select elements based on a context where something is not happening or in situations where you want to exclude your styling rule.

So I want you to imagine a scenario where you want to select and style all list items on your website, every list, just get them all, get them all, they’re like Pokemon, get them all, okay? I wanna style all of them, but, but, but, I don’t wanna style list items that happen to be in a navigation because I’ve styled those, like I don’t want these styles to conflict.

I have them the way that I want them. I just want to only affect list items that are not in a navigation.

Is that possible, right? Absolutely, it’s possible.

And by the way, when it comes to the not selector, a lot of people have a very hard time wrapping their brain around how the not selector actually works in my head. I always read it as select this, but not that select this, but not that.

Okay. So what we’re going to do is we’re going to come down here and we’re going to start easy.

We’re going to, again, we’re going to build us up. We’re going to just select all list items.

Okay. Within this container.

So within this container right here, which by the way, there’s a group here and a group here, I’ll give you a hint. One of these is in a navigation and the other one is not.

All right, but I’m selecting the whole parent of both of those containers. And I’m saying, hey, every LI in here, I want them to be a certain color.

Okay, what color? We’re gonna go with danger.

Okay, so let’s make all list items, the danger color. But remember what our not statement said, right?

We want to exclude list items that are in a nav. Okay, so a lot of people come in here and they’re saying, all right, I’m selecting this selector right here, whatever the parent is, and then I’m styling LIs.

So if I say that, but not a nav, I’ll get what I want. And that’s not how the not selector works.

Remember what I said, select this, but not that. So what you need is a full selection pattern, which is root LI.

That is the full selection pattern that gets your li styled. So select this but not that.

So now we we tack on to the end. We don’t try to be fancy putting our nots inside the initial statement or anything like that.

Make your statement of what you want to happen and then say but not this situation. What is the situation?

The situation is nav li. So li’s that are in a nav.

That’s the situation we want to exclude. So, you see what I’m doing?

It’s do this, but not this. So, do this, tack on to the end, but not this.

Don’t try to put these nots in all different places. I see nots everywhere.

not that and it just it’s very easy. It’s much simpler to just say what you want to have happen and then say what you don’t want to have happen.

Alright, that’s probably the easiest way to think about this. OK, let’s keep moving down.

You can also chain multiple context together in the same not by using comma separation this reads as select this but not in this situation or in this other situation. So now we have a wrapper that has a class called exclude.

So we actually wanna exclude list items that are in our nav, but we also wanna exclude list items that are in this class called exclude. So we can actually just take this class and like turn off this styling wherever we don’t wanna see it, okay?

So what I’m gonna do is select my parent and I’m going to come down here. Let me actually grab our statement from above.

All right. So if I if I say root li not nav li color danger and I’m actually I have the wrong thing selected.

I want to select this whole parent right here. Okay.

I see that it’s it this is not in a nav. So they’re turning danger.

This is not in a nav, so they’re turning danger, and this one is in a nav, so it’s not turning any color. It’s staying exactly as it’s being left alone, right?

That’s all correct, but what did I say? We want, because these have the exclude class, we want to exclude them too.

So how do we do this here? Do I have to write yet another, kind of like we did with the inf child situation?

Do I have to write another one and say exclude li, like root li not exclude li. Well, clearly that is not really helping us, is it?

That does not appear to be doing what we want it to do. So what I’m gonna do is come up here and I’m gonna show you no, in fact, we just put a comma inside of our not statement and we write what is the other context where we don’t want this to happen?

Exclude li. So nav li is a situation we want to exclude, and EXCLUDELI is the situation we want to exclude.

And this works as an OR statement. So it’s this or that, don’t do it.

Don’t do whatever’s happening right here. That’s kind of how you read this.

And guys, you can keep going. You can keep going.

You can have more than two, you can have more than three. You can just put all of your situations right inside that NOT statement, and it’s going to exclude them.

And so you end up with this, where our list items are left on style, they’re left alone, and then the list items that are outside of the nav and not within an exclude statement, guess what? They get styled by the rule.

Okay, again, this is, you have to know that you can layer these things, that you can have more than one exclusion path within that not statement. Let’s continue moving on.

Alternatively, so like, is there an opposite of not? Like we said, we want all these things to happen, but not when this happens.

Can we just say in these specific situations, I want this thing to happen? Yes, you can select items that match a specific selector or context using the is pseudo class.

Okay, so let’s say what if we want to style list items that are into specific context, like list items that are either in a nav or in a parent with the class include. So we’re basically doing the opposite.

Up here, we said style all list items, but exclude these two situations. Now we’re saying, don’t style all list items, only style list items that are in these two specific situations and we can do that with is.

Okay, so we’re gonna come down here. We’re gonna write root to select the whole container and we’re gonna say is, and then I’m gonna put parentheses and then we’re gonna style.

And for now, I’m just gonna say, is it an LI? Is it an LI?

Okay, color is gonna be danger and now it’s selecting all of them, right? But what I wanna do is I wanna select only the LIs that are in a nav.

So I’m gonna say nav li, and now you see we’ve uncovered the one list that is actually wrapped in a nav, which is that one right there. So we’ve said, hey, is this situation occurring, nav li?

If you can find a match for that situation, I want you to style it with the color Danger. Okay?

Now, what if we also want to include the LIs that have the class of include, or their parent has the class of include? Okay?

No problem, comma separation once again. This situation, or this situation, or this situation, and I can just keep going forever.

So the other situation is include Li and now the include Okay, and I actually have the wrong text here if we look at it. It does have an include class It just says exclude because this why why does it say exclude when it has an include class guys?

Because the course is free because that is the bottom line you get what you pay for You’re in a free course can’t guarantee that all the text. So we have the programmatic selection of specific contexts with the is pseudo class.

And now you see that we can create multiple situations where we want to style things with comma separation. Okay.

Now, by the way, you can do the exact same thing, exact same thing with another pseudo class. And this pseudo class is called where, right?

And I’m gonna show you, let me go up here, okay? I’m just gonna change the is to where.

And the exact same thing is gonna happen. And you’re like, why did they make two of those things?

That doesn’t make any sense, that’s just confusing. Why would they do such a thing?

Well, where does the exact same thing as is, however, it resets the specificity of the styles to zero. And in order, I’m gonna try my best to explain this to you, okay?

I’m gonna put this back to is, but I’m gonna copy it, I’m gonna bring it down here, and I’m gonna paste it, and I’m gonna change the is to where. And both of these lists are doing the exact same thing.

But now what I’m gonna do is instead of, because actually doing this on this ID right here is adding a lot of specificity, it’s going to complicate things. So what I’m going to do is just delete that.

Okay. And we’re going to go up to the global, not the theme styles, the page styles for this page.

Okay. And I’m going to put this statement first, root where nav li include li.

And look what’s happening. It’s actually taking effect.

Then what I’m going to do, well, no, we don’t even need to copy the is, we will use the is in a second. Think back, think back in this course.

What do you remember about specificity? Well, we know that these two things chain together, right?

Are more specific than if I said one of them. So if I said LI and then I styled it, that has a certain level of specificity.

But if I say, now that I, oh my gosh, I’ve now gotten more specific. And the more specific I get, the harder it is for me to have another style that overrides it, right?

You wanna limit your specificity as much as possible. Because if you come along later, you wanna be able to do something more important, you wanna be able to override that.

You don’t wanna have to be in a situation where you’re getting crazy specific or using the importance selector to override those things I know man big beginners are probably their mind is fucking probably just going a million like this is spinning right now they drown a long time ago we need the damn Coast Guard at this point probably but it’s okay we’re gonna keep going we’re gonna keep pushing through it I believe in your ability to bookmark and rewind and replay. Okay, all right, let’s keep going.

So specificity is the thing that we are dealing with. So we also know, by the way, guys, that if I put things later in the style sheet, they’re going to take precedence, okay?

So the question is, if I say nav li include li, which are very specific statements, I’m gonna show you the magic of where magic abounds, right? It’s a very magical pseudo class because it takes something that’s specific and makes it non-specific like magic.

Okay. And actually, before I do this, I need to remove that.

We don’t need this root anymore. We’re just in a general style sheet.

Okay. So I’m just starting with where and I’m saying where this is happening and where this is happening.

I want to color them with danger. And you see that that’s exactly what’s happening right here now I’m gonna go down to the bottom of this sheet.

Okay, I should not even though it’s at the bottom be able to override Those statements with a new statement. That’s only targeting the Li because this is less Specific than nav Li and include Li those are more specific instructions than this instruction right here.

But I’m going to say color green, guys, everything in here is turning green. Everything.

And you might be like, well, Kevin, I don’t believe in the specificity thing. It’s simply doing that because you put it last in the style sheet.

And we just know the rules that come last are going to take precedence over rules that come first. Okay, all right, I’m going to take that.

I’m going to come up here and now I’m going to place it and look, it’s still overriding it. Why?

Because this, even though it comes first has more specificity than these instructions wrapped in a where, why? Because the where removes their specificity.

It sets the specificity back to zero. So now you’re able, it’s like creating a situation where you take something specific, but you can override it at any time.

This is very, very, very powerful. Notice though, what is not being overridden?

Look, all of these are green, these two are not green. Even if I put this at the end down here, okay?

So I’m gonna come down, put it at the very end, still not green, why? Well, let’s take a look.

What was happening in here? Okay.

And actually I’m being unfair because we have the ID level up here. So I’m just going to take this out.

Now they’re all green. Let me go back up to our global style sheet up here.

Okay. In fact, I’ll just change the where to is.

Okay. And now you see, I cannot, this LI is no longer able to override these, even though it’s coming last.

If this is a where, it can. If this is an is, it cannot.

Why? Because is maintains the specificity of whatever statements are inside of it.

So the fact that these are specific, they are remaining specific. Which means my non-specific or less specific instruction instruction, even though it comes later, is not able to override the styling.

That is the difference between is and where. Is maintains the specificity of your instructions.

Where sets the specificity of every instruction in here to zero, making it easily overridable. Okay, let’s continue on.

Then there’s the has. The has pseudo class, one of the most exciting, one of the most powerful pseudo classes ever created, has allows you to style a parent, a parent, right?

What have we been doing so far? Styling children.

Never before in the history of CSS, never before, have we been able to style a parent based on something that’s happening to its children or with its children. And now we can with the has selector.

So has allows you to style a parent based on the existence of a child context. Something that’s never been possible until very recently.

For example, with this grid, I wanna select every Brixie container. Actually, we’re gonna do this on the page.

Every Brixie container that has a figure tag somewhere inside of it. That’s actually a figure tag that is a direct child of the container.

So I’m gonna come up here and I’m gonna say, Brixie container, and then I’m gonna say has. So I’m saying, here’s what I wanna look for.

I wanna look for Brixie containers, but I wanna look for Brixie containers that have a certain thing going on, right? In this case, they have a direct child that is a figure element.

And then what do I wanna do? I wanna give a five pixel danger border to the Brixie container where this situation is true.

So border five pixel solid, danger, and look, we are selecting the parent based on its child. I go up here, oh look, that one has one as well.

I go up here, oh look, this container has one as well. That container, they all do, right?

Ooh, does this parent not have a figure that is a direct child? HTML tag, not a figure, not a figure, not a figure.

Hey, so it didn’t select this parent right here. Again, this is the magic of programmatic styling and programmatic selection of elements, okay?

Let me go back up here. We’ll scroll back down to our has area, okay?

There’s where, there’s has, okay? So I selected every Brixie container that has a figure tag somewhere inside of it.

And I wanna show you one level deeper for those of you who are not drowning yet, okay, and can still see and can still breathe. Because this is, again, I think a lot of people don’t even realize that this is possible.

But what I want to do is I want to combine has and inf. And what I want to do is I want to select any container that has a direct child figure element that’s in the second position.

So if I take this figure and I say oh oh by the way not don’t go find the parent that has any figure tag that’s a direct child of the parent. Find one that has a figure in position number two and it’s gonna find this one.

Why is it finding this one? Well if we take a look here that is in fact a figure tag in position number two.

Now I’m gonna go up, I’m gonna go up and we’re gonna see, is it happening here? Yes, I guess, let’s click this and the figure tag is in position number two.

But what if we take this element right here, which is not a figure and we put it in position number two, the parent is no longer styled, it’s no longer selected, okay? So what we’re doing with this craziness right here, again, I think a lot of people don’t even realize this is possible, is we’re saying, hey, look for any Brixie container that has a direct child that is a figure, but that is also in position number two.

Now we’re combining pseudo classes together. The has pseudo class mixes or combines with the nth child pseudoclass or the nth family of pseudoclasses and we get absolute magic and absolute power at your fingertips my friends.

Okay let’s continue going. This is why I love CSS by the way.

I mean I just absolutely love CSS and I hope you guys love CSS or if you don’t because your head is spinning and you’ve drowned already and you’re gurgling I hope you can come to love CSS. Alright so let’s not forget accessibility by the way.

In all of this talk let’s not forget accessibility. We have focus and focus within.

We’ve got to make sure that our keyboard friends are not forgotten right? So focus sets the style of elements that are currently in focus and focus within sets the style of elements that contain a focusable element.

I’m going to go to the front end of the website for this. We’re going to scroll down to our, let’s zoom out, scroll down to our card.

Where is it? Here it is.

Okay, so there’s something I know about this website. It has automatic CSS installed.

Automatic automatically styles the focus pseudo class of all focusable elements. And in this case, it styles them with the website’s action color, which this button is also an action color button.

And this actually creates a little bit of a problem. So what I’m gonna do is I’m going to tab navigate to that button.

And we are actually in fact focusing on that button right now. But you can’t tell because the focus color is the same as the button color.

And what we wanna do is we wanna change the focus color of that element right there to black, okay? So what we’re gonna do is we’re gonna come in, we’re gonna select that button right there, CSS, and I’m gonna say, hey, select this button, that’s the root keyword in Brics, to select this element right here.

And then the pseudo class, let me zoom in, the pseudo class of focus, right? So we’re gonna come in here and we’re gonna decide what we wanna do.

Now, we could do a brand new box shadow style and all of this, because that’s what our focus style uses. You can typically use an outline or a box shadow for your focus styles.

Automatic CSS actually lets you swap back and forth. You can say, I want to use outline or I want to use box shadow.

And you just do that with a selector inside the dashboard, very, very easy. It also extends the power to what are called locally scoped variables.

Or in this case, it’s kind of a global variable, but I can reset the variable at the local level. And it’s just called focus color.

So the box shadow is using a focus color and I can hijack the focus color and just change it on the fly. So I can say hey for this element the focus color is going to be black because I’m styling the focus pseudo class.

Alright so I’m going to go ahead and hit save. So now we’re combining different techniques like variables, tokens, which you’ve already learned about, and pseudo classes.

Okay and now when I focus on that Guess what? The box shadow focus color is black.

Let’s inspect this and see exactly what’s going on here. I’m going to move this over to, let me see, how do I, there we go.

Position this on the left side. So there’s my A.

And if you want to inspect this, I know we did a whole training on using the inspector, but I don’t think we went into this deep of it. Okay.

So I’m selecting my button right here and I’m going to click this pseudo class button and it’s going to give me some pseudo classes to inspect the styling of in this clay. In this case, I’m going to select the focus style and it’s going to see right here, focus color is black, but how does that know to change the box shadow color?

Well, we’re going to keep coming down and we’re going to find our box shadow instruction right here.

Focus width and focus color are variables inside of this box shadow situation. Again, this is done by automatic CSS and so we’re able to hijack the focus color and change it to anything that we want.

Watch this, I’m going to say green and it’s going to make the focus color green when I focus on that button. Right?

These variables, these tokens, take something that’s already powerful and make it even more powerful and even easier. Okay so this is an example of using the focus pseudo class.

Now what we want to do is understand what the focus within pseudo class does. So what I’m going to do for this is I’m going to take that card and I’m going to take this the clickability of this link and I’m going to extend it to the entire card using something called clickable parent.

It’s a technique I’ve taught many times on this channel. I’m gonna go make sure that this is a relatively positioned item.

And then I’m gonna go in here, and in automatic CSS you don’t even need to know how to do this. You just select the clickable element, and you say clickable parent.

You add a class called clickable parent, and like magic it adds the clickable parent class. And now when I refresh on the front end, check this out.

When I hover, I get the hand over the entire card. I can click anywhere on this card, and it’s gonna take me to where this link wants to take me.

However, however, when I focus on the card, I can’t focus on the card. I cannot, it still focuses on the button.

You see it? Oh, let me go back.

So, next, previous, next, previous, look. This is the focus, but I want the card to be focusable, because the whole card is clickable, therefore it should be focusable.

Now in automatic CSS all I have to do is say focus parent utility class I’m done but I’m going to show you how to do this manually okay. So what I’m going to do is select the parent and I’m going to come down here to the CSS I’m going to select the parent with the root selector and then I’m going to say focus within and what in the world does this do?

This is almost like the has selector where it’s saying, does this parent have a focusable child? Except it’s just a dedicated one called focus within.

So it’s looking for a focusable child. If it does have the focusable child, we can do something to it.

For example, we can say that you are going to get a box shadow and your box shadow is going to be 0 0 0 5 pixels and it’s going to be black. Okay save now we go to the front end and refresh now we come down here and focus look at that the parent now has the box shadow why because it has a focusable child okay but the problem you see is the focusable child still has the focus style that’s not good because now both of them are in focus and that can be a little confusing for the user.

So what we’re gonna do is we’re gonna come down here and give it another statement. Root focus within focus.

Okay. So what we’re saying is, hey if this parent has a focusable child, select the focus style of that child.

You don’t even need a star selector here. You say any child in here that’s focusable, we’re about to change the focus style.

What are we going to do? In this case, we’re going to say box shadow is none.

Get rid of the focus style on all focusable children. And I’m going to say save.

We’re going to go back to the front end. I’m going to focus.

And now the parent gets the focus. The child does not get the focus.

is absolutely fantastic from a user experience and accessibility point of view. Okay, now let’s continue going.

I’ve got one more selector. How am I doing on time?

Okay, okay, all right. We’re up there.

We’re up there. You guys have been drowning for a minute now, quite a while.

By all health standards, you’ve passed away. You are not revivable by this point, but it’s okay, I have faith in you.

The final one I’m gonna cover in this lesson is empty. Sometimes when conditions, dynamic data, et cetera, are used, a container or wrapper may end up empty for whatever reason, we don’t know why, sometimes we can control it, sometimes we can’t control it.

Let’s just say it happens, okay? In this case, we may wanna style the empty container a certain way, or we may want to hide it all together.

The below grid has an empty cell. Let’s style it, and then let’s practice hiding it, and then let’s do something even more advanced based on the information available to us, okay?

So what I’m gonna do is come in here, and in the builder, you can actually see the empty cell right there. You can see it now notice on the front end.

Let me zoom out on the front end. You cannot see it.

You didn’t realize that there was an empty selector right there. Now if I put a background color on this container, so I did something like BG base.

All right, just we’re going to remove that, but I want to come over here and show you. Oh now it’s kind of clear that there’s an empty set like there’s something missing here because I see you know nice balance in our grid And then I see like clearly this is empty.

There’s something empty going on here on the end, okay? Now let’s remove that class so what we want to do first is we want to practice Selecting just select an empty container And so what we’re going to do is use the root keyword, okay?

Let me go back up here, so we can see our little grid here. All right.

So root and then space, right? We’re going to say, does this have anything that’s empty?

That’s it. That’s all we have to say.

Does the root selector have anything inside of it that is empty? And what we can do is style that, that item.

So we can say background color equals danger. And there it is right there.

We’re able to do whatever we want with it. Any form of style we want, we can, we can do.

Now, if you know anything about CSS you know it is possible to completely hide things. So I can say display is none and it gets rid of that selector because it’s empty right it absolutely gets rid of it.

Let’s go ahead and save. Let’s go to the front end and inspect.

So I’m going to inspect this I’m going to come in here. Okay.

We have one, two, three, there’s the fourth thing, but look, it’s not even selectable. It’s like it’s, it’s not even there.

It’s like, it’s gone. It is still here as a DOM element.

Can’t really do anything about that, but it’s gone and it no longer takes up space. By the way, there’s a visibility hidden as well.

A lot of people get confused between visibility, hidden and display none. Visibility hidden does hide the element, but it leaves it space on the page.

Where display none removes it space from the page, it won’t affect other elements. However, however, in this case guys, we defined a four column grid, but there’s only three items.

The last item ended up empty. And even though we’ve hidden it, there’s no way, well we think maybe, there’s no way to inform the grid of this development.

Like, hey dog, you are being four columns right now and there’s only three children because that last one is empty. Is there a way, is there any way where we can say, hey, you have an empty child.

You know, you four column grid, you have an empty child. If you have an empty child, maybe not even, it’s not even a statement of you do have, it’s just saying, if you have, if you have an empty child, we want you to change your grid structure.

Is that, rack your brain guys, I’m trying to give you, if you didn’t catch on, I’m trying to buy you time so you can rack your brain and go, is there a way to do that? Is there a way to, based on what we learned in this scenario and in this lesson right here, is there a way to do that?

Can we do that? Okay, you’re out of time, you’re out of time.

Let’s go ahead and take a look. So what we’re gonna say is, hey, we’ve got this class that we’re using called Grid4 right here.

And anytime that Grid4 shows up, we’ve obviously seen, we’ve witnessed a scenario where there could in fact be an empty child, okay? So Grid4 has an empty child.

There’s the style rule so we’re not confused. Okay, so grid 4 has an empty child.

There’s the styling of the empty child right there. But what did we say?

Let’s review the logic again. If grid 4 has an empty child, you understand why I stress that word has?

Yeah, because we use that earlier didn’t we? All right, so has an empty An empty child.

By the way, it has to be a direct child, okay? Has a direct child of empty.

We’re gonna go border five pixel solid danger, okay? And by the way, sorry, this should not be spaced out, right?

It’s not if grid four has some sort of ghost child that has, it’s if grid four itself has an empty direct child, then we want to style it. Okay?

So notice the difference between attaching the has and not attaching the has. This is like the has is attached to some ghost thing, which is basically almost like the universal selector.

Okay? This is no, no, no, no, no, no.

That specific class doesn’t have something. And in this case, we’re looking for a direct empty child.

And this obviously has one, it’s sitting right there. Okay, so now what we can do is we can come up here and we can say grid four and then we can say space this time empty.

So find the empty thing in grid four and display it none, right? Now look, the space that was being taken up by it just went away.

So it’s almost like it doesn’t exist. Okay, now what do we want to do to this grid 4?

We don’t want to, obviously, we don’t want to put a 5-pixel danger border, right? That doesn’t help things, that just makes the situation worse.

We want to change it to a 3-column grid. So in this case, instead of border 5-pixel solid danger, we can say grid template columns grid 3.

I’m just using a utility variable from automatic CSS for a three column grid, but I’m programmatically changing the situation by saying if there is, because I witnessed it happening, hey, if there’s a grid four and it has an empty child in it, a direct empty child, I need you to change the grid template columns to three. And look, look exactly what we get.

So I’m gonna go review this on the front end. Now we have perfect balance in our grid, no empty children, because we displayed them none.

And we don’t have a four column grid for three elements because we programmatically changed that to be three columns, to drop a column to account for the missing empty child. Again, I wanted to show you the power.

I’m combining pseudo classes. The pseudo class has with the pseudo class empty.

This is very very very very powerful. Again stuff that you know people don’t even I think realize is possible.

Okay all right so let’s go down here we got to wrap this up. I know your brain is absolutely fried at this point.

Mine is kind of too. It’s kind of hard to go through all of this and try to explain it well because it is, some of it is quite complicated, right?

So what are some other pseudo classes that we didn’t cover? By the way, I don’t want these things to be green.

Let’s go get rid of our instructions that we were playing around with up here. Okay.

So other pseudo classes that we didn’t cover, active, visited, which is a link that has already been clicked on by the user at some point. Enabled, disabled, that’s whether an element is enabled or disabled, valid or invalid.

The root selector, we didn’t cover that. We have covered it in the past.

The root selector, the root pseudo class is where you go to create your global variables. They apply to the entire website.

There’s a bunch of pseudo classes related to form elements. And then there’s even more beyond that.

But what we covered in this training, okay,

I don’t want you to worry about these too much because what we covered in this training is the bread and butter of pseudo classes. If you can master what we covered in this training, you are going to be a CSS styling master when it comes to programmatic styling of elements on a website, which by the way, is insanely important for scalability, maintainability, all the stuff that we talk about constantly on this channel, constantly in terms of professional web design versus amateur web design.

The promise I made to you, I gotta go back to camera. The promise that I made to you at the beginning of this entire series of lessons called Page Building 101 was that I would take you from chump to champ.

That is what we are doing. You are swiftly going from chump to champ.

We’ve only got a few lessons left. I want you to hang in there.

If you have any questions about this lesson, drop them below. I will help you out.

Don’t forget there’s the Inner Circle at gary. co slash inner circle.

If you want that dedicated help, you want deeper trainings, and you want to go deep on all things like business, pricing, sales, proposals, statements of work, accessibility, and on and on and on and on and on. Everything else that you want to level up in this game, that is the perfect place for you.

And unfortunately, guys, I’m sorry. That is it for this training.

I know you guys had fun. Those of you who are still alive and not washed up on the beach at this point.

That’s it. That’s it for this one.

and not washed up on the beach at this point. That’s it.

That’s it for this one. So I’ll be back very soon.

I’m out. Peace.