In this video.
Let's talk about another way of selecting element.
You talk about simple selectors.
That is a combination of element.
Class and ID to next category is what you call the case computers.
And for these we have four types and one is called descendant selector and child selector, adjacent
sibling selector and general sibling selector.
All these are in the course PDF, so we download and make reference to it.
So let's get started with the CSS coordinators and talk about what is called descendant selector.
So as usual, I have created a new folder called The Combinator.
So we have a look here.
If you check the folder here is called Combinator.
That is the second method of selection and that we have different selectors and the first one we talk
about is called descendant selector.
So open it.
So I have one hidden called descendant selectors and for this it's also name as pacer.
So this pacer is same as what descendants select because we use spacing to select a descendant, descendant
element or selector.
And I have my underline tells you which topic you are trading.
That's why I have it here.
I have h to how to learn CSS, follow tutorials and then a dev with this one.
I have one dev and inside a half p tag for the online resources.
And then down here I have one p tag called self taught approach.
The descendant selector allows you to select all elements that are descendant of a specified element,
and this can be very useful when you want to apply styles to all child elements of a particular element.
So what is.
That's let's explore with code.
So what it means here is that we can style a specific element that is descendant of a specified element.
So this approach helps us to avoid selecting multiple elements or applying multiple colors or multiple
sources on a specific element.
So looking at this, first of all, to understand this sentence selector understand the structure of
your HTML code, look, here we have one element here.
This element is descendant of what this body means once a descendant.
It means that a child of a parent.
So looking at this element here, this body here is a body element.
This one, the body is an element here now.
And inside we have individual children.
This one, this one and this.
But for this day, you can see that this div wrapped something inside that we see that it wraps the
entire what the h to p tag.
And inside I have another div that's what you call nesting how we are nesting things together.
So before we move on, let's install popular extension core or to close.
So with this extension, we're going to help me if I'm trying to rename a tag, you're going to rename
the closing tag automatically for me as well.
So let's install that and let me show it to you.
So I will disable it.
And then our demo for you to see.
Let me uninstall for the meantime, let me reload it.
Let me start my server because after that my server has crashed.
So I need to restart my server.
Now it's up and running.
So let me prove to you why I need that tag.
Okay, so let's say that now let me have some space in here.
When I click on that, I see where my tag end is that it start from line number 14 and ends at line
number 20, meaning that this one is one child child having individual children inside.
So if I want to remove this one, if we see that this has moved by this one, has it removed yet the
closing one.
So let me undo it and enable the extension or to close.
Yes.
And now let me install it again.
And now it has been installed.
So let me save the file now again, if I want to remove this one.
See that land about 14 and then about 20 or a test has been removed, or if only change this one to
p tag, it has done it automatically, then coming down here and then change it.
So let's remove this one, this day, line number 14 and line number 20.
Again, let's have a look at the structure of this to better understand it's called descendant.
So one more time we have the parent body.
This one is the first parent, this body here and inside we have this parent, but it has one child
here and has one child also one child, one child, one child and one child.
Understand the hierarchy of your HTML element.
And then inside this child, we have one child inside this particular div, which is div number, this
div I'm referring to this diff.
So when I say descendant, we can say that H to H to H how all these children are descendants of the
body.
So what about this div, this line number 17 div?
This div we see that this P is descendant of this div that we understand.
So now that you understand what it's called descendant, let's go ahead and apply some CSS to it.
So how can I start this particular element here?
Because this one is nested inside.
Dave We have so many ways of tying it.
If I select P, for example, let me save it.
Let me go to my CSS.
And then let me target op element and let's say color of it is going to be red now and see that for
all p tasks it has been changed to red.
That's one way.
Or I can give all this p elements with the same class name say title.
So this P has a title here and this P has title here and this P has title here.
So if I come here and select using class title, if I save it is still the same.
I can use ID also to be the same.
But here comes the descendants select.
Let me undo.
Let's say that I don't want to select all P elements, but I want to select specific element.
And that element must be a descendant of what I'm going to select.
And that is what you call descendant.
Select.
Let me show you.
So let's say I want to style.
P at this day or any P tag which is descendants of this death.
So come up here now our in Dave.
So now Dave is my parent.
Okay.
And now inside of Dave.
What element do I want to style?
P.
So we bring Dave and space and pee.
That's what you call a spacer and then my carry braces.
So I make it color of, say, red.
Nations that have selected only this Dave or repealed or it is p which is a descendant of the diff.
So I can add a couple of P tags here.
So let's say I mean.
Follow.
I knew would take academic.
You see that?
When I say it?
It's p.
This fall.
I know what the academy is going to be red or not guess right?
I'm saying it's going to be red when I save it.
We see it's red even though I have multiple p, but because I use this sentence selector, it has selected
that particular element style.
That's the beauty of the sentence selector.
So depending how you want to go by, the choice is yours.