Hello in this CSS Crash Course video, we're going to be looking at Advanced selectors. So what I'm going to do is remove all of this code and add some code here. And basically advanced selectors if we go to the index dot CSS, this is the selector with selected an ID, you know, we're selecting an element with ID of hash hash alpha, hash HSL, hash HSL, a, we can do for the element name, but we're going to introduce more advanced universal selectors when I introduce child selectors and adjacent selector. So if we go to our index dot HTML, what we're going to do is actually put a div here. And the div gonna have an ID of do one as usual to easily be able to adapt the unit I mean, not the universal selector, the advanced selectors for different types of element names, classes, IDs, type, whatever, really, you you should be all good.

So from the inside here in the middle Put div text if I'm gonna put the number one. The data that I'm putting in here is just to demonstrate what they do your website will obviously be organized different may not you might have exactly the way we've got it, chances are unlikely. Now we're going to put a p tag. I'm going to put letter P and what we're going to do is put p one we're going to put this I'm going to put p to about the right amount of closing ones I believe so. It's almost like it's messing up for some reason. What why though is is highlighted go back and see when it started doing that.

Okay, that looks okay to me. I don't see why this it should be fine. So what I'm going to do now as I adopt the after div tag, I'm going to put another p tag almost is like I just did something like as if this is messing stuff up. If I were to put a tag I'm sure it's just sublime being dodgy bumper p tag here, I think or no, I'm gonna put some empty lines. zoom in a bit so you can probably see it a little better. And inside here I'm going to Hara graph text.

Dress. These may just look like random elements for the invoice just to demonstrate the advanced selectors and a link to the model and go anywhere. To and in here I'm going to put header to copy and paste this 3344 free marking is a first header free first, second header free. Wondering why if for example for brake line there CU Welcome to anything inside the via wave form with de give some light. I'm just gonna put it down to sublime indogene. Save that refresh the web page.

So we got these pieces of information, which is pretty darn cool. We go to index dot CSS, actually going to get rid of all of this code, save that refresh. So we've got our code here, we can easily see it now. What we're gonna do first of all, just show you the universal selector again, which is asterik. And this is like, every single element on our page. So we're gonna do font size of 1.5.

Yeah. We're going to put the color of green Find that way. font, just talk today to be faster. And this is going to be bold. Save that, go back, refresh. No often, that's a little too big on 21.0 em, okay, as you can see, everything had been affected by this, what we can do is use a different type of universal selector.

So if we put let's say hash div one Asterix after it got to put a space between them. And now if I were to put background dash color, yellow, what this does, it affects every element within the element that has an ID of hash one. So it will affect all of these for refresh, effects all of it for this text, because at the end of the day, this text is within this particular ID div. One It's not in its own element, but effects everything else which is pretty cool. Now we're going to be looking at child selectors. So the child selector, very simple for the hash table one for for greater than, and I put whatever chose selector we want to do something to put p, that means all the P tags immediately within the div one are affected by pop up, background.

Does color of white. And if I were to, okay, know what I wanted background color blue, and I'm going to break hex color of white. Save that, go back refresh. As you see, this p tag is now blue. But if we go back to here, it's only affecting this. I mean, this particular p tag, what happened if we were to Put a p tag within here.

For a p tag in here. I'm going to say random text, save that refresh that doesn't get affected by the child select tag the only affects the children that are a p tag with directly within the div one ID element. So it only affects this one here, not this one because it's not directly within it. Now the final selector we're going to show you is the adjacent selector. So what we're going to do is h2, h3 for fun dash sois. Report one em I didn't know I want to go zero.

Otherwise, you won't get to see the difference, but go back refreshed. And what that has done is effects at the hate free tag that they the jacent to the h2 tag, and then affect the h2 tag. And it doesn't affect the other H three tag, actually visitation both are really good changes so you can see what we're saying a bit better refresh. As you can see, this is still the same, because this isn't directly adjacent to this one right here. This is really pissing me off for whatever reason. This is your looks good.

And it seems to be working okay, as well. So that's it for advanced selectors. If you have any questions, feel free to post them on my education platform. So no learning Dakota, UK, there will be a resource link, which will take you to the GitHub page, which will show you all of the code from every video in this series. And as usual, thank you for watching. I hope you have a great day.