Video Summary

Alright in this section we’re gonna cover descendant selectors using CSS so that way we can target multiple different elements, classes and IDs. So that way we can actually manipulate and target the specific element that we want to. So before we get into the CSS, let’s just go over what we’re looking at with the HTML. So what we have right here is we have a div tag, which is basically defining certain elements within one section of a website. So if we come down here, we have a ending div tag, and we have three paragraph tags. And within each paragraph tag, we have the same span tag right here for each single one, even though it’s in different places because we have stuff over here is is targeting the same exact sections of each paragraph. Now if you look over here, the the second and third paragraph have the class blue to them. And the third paragraph has the ID red. Alright, so what we’re going to do is we’re going to use multiple different elements to target one specific element to change for CSS styling. So let’s just start off and we’re gonna go by using this div tag and we’re gonna do a space and we’re going to put in p. So basically what we’re saying with this is that within this div, we want to target every p tag and we’re going to style every p tag within that. So what we’re going to do is we’re gonna come here and put our curly brackets and we’re going to do color, and we’re gonna do green. 

So we just changed all of the paragraphs Within this div to green. But what happens we want to make these last two paragraphs in blue right? So what we can do now is we can go here and go div dot blue, and we will go color blue. 

Right? But now as we know that IDs override classes, classes can be used over and over again, IDs are made for specific elements. So maybe we want instead of having div blue, Div dot blue, maybe we want to go div. div and we’re going to call we’re going to add because remember IDs, use the hashtag or pound symbol, and then we’re going to do red, and we’re going to open this up. 

We’re gonna make this color red. Now we made this third, third paragraph red, but now we have this class where we say this, we’ll just do span one and maybe we want to make this just a generic color black. Alright, so now and let’s make this let’s make this 40 pixels in size, so font, size 40 pixels. 

Alright, so now let’s turn that downloaded and maybe we’ll make that 20 pixels. All right, so now we have a little bit bigger font size from here and here. What happens if we want to change that that font size to where the blue paragraphs are? Maybe? Maybe just normal size Alright, so now what we can do too, is you can go here and go blue that span one, open up our curly brackets, and now we can go and say font. 

Size and let’s just do 10 pixels. See how that looks a little bit smaller than normal. But you get the idea that we were targeting these two paragraphs and this span, which to manipulate this section right here to be different than here. And we’re using multiple different selectors whether it be from an element, an actual class or an ID. And we can just go down the way and make sure that every single element we want to manipulate we can and the reason why it’s called descendant selectors is that we have to go down the line of how it’s set up. Now if we wanted to do this and say we take this blue owl, and we go blue it goes back to the 20 pixels, right? So this, this does, this only works when you are going down the line of this div we’re targeting this paragraph or this blue paragraph and the span so that’s why I will just go and take this back. 

Now these paragraphs are back to the original size. So that’s why it’s called the sentences you have to work your way down and make sure that everyone’s there. Now when we use this, we’re going to be able to leverage the Inspect tool on Google Chrome and the Inspect tool on Firefox. 

So I think in the next section, we’re gonna be I’m gonna go in, I’m gonna explain what the Inspect tool is, how powerful it is. And then we’re gonna go in and start playing around with that on a website. And basically what I don’t want you guys to get too confused or too worried about knowing how each selector is going to work because basically, what we’re going to end up doing is we’re going to be able to isolate a certain element on our on these web pages. And then we’re going to be able to copy and paste the exact descendants that these web developers use and copy and paste them into our CSS or additional CSS tools through WordPress, and be able to set up the individual code for that specific element. it’s a pretty powerful tool is pretty excited. this is when all the stuff that you’ve learned from HTML and CSS really starts to come together and once you combine that with WordPress. Oh man, there’s a lot of cool stuff that we can do so with that being said let’s hop over this learn a little bit more about the Inspect tool and start being able to play with live websites.