The next selector we will talk about is what you call general sibling selector.
On to this point, you've covered a lot.
That is ways of selecting element.
So let's talk about the general sibling selector.
Before we continue, I have already created a new folder and I have name it as general sibling selector
and inside I only have few lines of HTML as before.
So let me point out where we need to pay attention to.
To better understand what is general sibling selector?
Let's go.
Well, if you see that here we have one, Dave, and then that is it.
And beneath that, we have individual P tags.
This way I want you to pay attention to.
So what is general sibling selector?
Well, the general sibling selector allows you to select all elements that are next siblings of a specified
element or the selected element.
So it means that all elements that are next siblings of the specified element.
Good.
So looking at this one, we have the first one, this what you call the specified element because this
is what we want to target.
So this one is what we call the specified what elements because I want to style this one.
And then the element that is next to the specified element are this ones one, two and three.
So any element that comes after this selected element.
We can use general discipline selector to style all of these ones.
So let's see how we are going to do it.
And you can see that I have lipo this one as this won't take any effect because this P is not next sibling
to the selected element.
So let's see how we are going to implement.
That is pretty simple.
So let's go to the CSS part of it and now let's write some few lines of CSS and you'll be good to go.
Remember, I need to target my selected my specified element that is my div and then the symbol is called
tilde.
That is this tilde and then p meaning.
I want to select all elements that is next sibling to the div meaning I want to select all P that is
next sibling to the div.
So here we go.
Color is equal to red.
Then we see that we have this element, this R next sibling to the selected div.
So we see that this won't take effect because this one is not next to the next or is not next to the
specified element.
But if I bring that P tag here, this P, let me cut it from here and bring it down here and let's save
it now and see that it has been affected to have that.
So if I put, let's say, any tag apart from P, I can say let's see H five and let's see.
I know that paragraph.
Let's see.
Save it.
You see, I didn't get that color because I'm targeting P paragraph, but this.
This tag is H4.
If I change this one to H4, the H4 is going to have the color as expected.
So in this video, you talk about what is called pseudo classes.