Hello everyone and welcome back.
In today's video we will learn about Combinator is in CSX.
So far we have you seen that selectors to select elements for styling.
As you can see we have used the human element paragraph bloodstains we have used need to add styles
and we have used plus red states.
These are all single selectors.
Now let's learn how to combine these selectors so that we have to define lesser ideas.
And plus this for this combining purpose we have combinations these commentators define the relationship
between two selectors.
These are the four competitors available and c assists.
The first is the send in selector.
It is represented by space.
Then we have Jade selector.
It is represented by graded unsigned then we have a disabled sibling selector.
It is represented by let's say and then we have a general sibling selector.
It is represented by Tilda.
Let's try the first one which is descendants selector.
There's a box to use this and then selector is selector a space select to be the the same.
Then select the little select all the elements matching selected.
Which are descendants of the elements matching selector.
Let's try an example to understand this better.
You have these extreme elements and you want to select all the paragraphs which are inside this article.
So for that let's add some good here.
So first we need to select all the articles so far that we can simply do this.
And now what we want to do is we want to select all the paragraphs which are inside this article.
So we could simply do a space on paragraph and this will select all the bag of dots which are inside
this article element.
Let's bring about going into the hugh led strategy needs and values say Font size 18 pixels.
And as you can see the font size is reduced for all these.
Let's try doing the background colour so let's say background colour and light yellow.
Let's say good.
As you can see are all these photographs are highlighted with light yellow colour and that's how our
descendants electable.
Now let's try the next Combinator which is J selector.
So the syntax to use Jade selector is selecting a graded and unscientific to be this greater than sine
is the change selector.
It will select only the direct children.
Let's try an example to understand it better.
So going back here let's expand our code added up let's say these paragraphs were robbed in our div
similarly say these two last paragraphs.
All right.
And then give
let's save it.
Let's bring a about editor here.
All right.
So let's come on this one.
Let's save it.
And as you can see the styling is and back to normal.
Now let's try using this giant selector let's say.
Article entitled It is represented by graded unsigned.
So let's use that.
So graded unsigned.
We want to select all the paragraph tags.
So let's do this let's try getting them back onto the first.
Say like Google let's save it.
And as you can see here the First Fourth Fifth and Sixth paragraphs are highlighted and here the first
four paragraphs highlighted so we featured the code
so inside the article we've got one two three and four paragraphs which are direct descendants of article.
But these two paragraphs they are inside div.
So there is the direct descendant of article and not these two paragraphs similarly over here.
Have got one two three four.
These starting four paragraphs as the direct descendant whereas these two are inside.
Def similarly if I out this one in our div
on let's just bring this here.
Let's save it.
And as you can see now even this one is not highlighted because now it is inside a div and it is not
a direct descendant of the article element.
That's all for today guys.
We will talk about the next two communities in the next video if there's something that you did not
understand.
Feel free to double comment and we will discuss it.
See you in the next video.
By and.