Next up, we have two more commentators who are going to cover this.
Both have to do with sibling relationships,
meaning elements that share the same parent.
And the first one is called the adjacent Combinator.
We use the plus sign character.
And what it will do is select elements that are directly after the first
selection.
So in this case, paragraphs that come immediately after an H1.
So I have a very simple piece of markup here.
H1, a paragraph and a second paragraph.
Only this paragraph would be targeted because it comes immediately after an H1.
It's adjacent to that first part of the selection.
And remember, you don't have to use element selectors here.
That's what I'm using to keep it easy.
But this could be a class or an ID or an attribute selector.
We're focused on the plus sign, though.
That is the adjacent sibling Combinator.
So let me just quickly show an example.
We don't really have any obvious place to use this, but let's just try
any paragraph that comes immediately after an H2.
All right. So I'm going to select
H2 plus paragraph.
And if I hover, you can see a V code giving me a hint.
Write a paragraph that it's right after an H2.
And then in here, let's just make the color
something like deep pink
and you'll see this paragraph is deep pink
because it comes right after an H2.
But these ones aren't because they are.
I mean, there is an H2 here, as you can see.
You might not know that's an H2, but that is an H2.
But they don't come right after it.
Right.
This is a paragraph that comes.
I don't know what that is. H4. A span, I think.
Whatever it is, it's not an H2 if we look at the markup.
So scroll down further.
Yeah, we have other paragraphs, but they are not directly adjacent to an H2.
And if I had a
second paragraph after this one,
after the summary paragraph, I'll just use some Lorem ipsum.
So Lorem tab, that one is not pink
because it does not come immediately after an H2.
It is a sibling, right?
They share the same parent, but it is not adjacent.
So that's the plus sign.
And then we have the tilde character, which is the general sibling Combinator.
And this one will select any sibling elements.
It doesn't matter if they're adjacent or not.
So in this example, select the paragraphs that are sibling to H1 elements.
And siblings mean that they share the same parent.
Right. So they're not nested or anything.
They're at the same level in the markup.
And also, there's one other requirement.
The paragraphs have to come after the H1.
So this wouldn't select the paragraph before the H1,
even though they are siblings.
But it does so like these two paragraphs down here,
which are siblings with the H1 and they come after it.
Similar concept to the adjacent combinator, except
when we use the tilde character.
It doesn't care if the second selection immediately follows the first or not.
They just have to be siblings.
So if I
change this to be a tilde right there,
it will select any sibling paragraphs
that come after an H2
and that's all that we have, right?
We have H2 down here. We have paragraphs down here.
But they are not siblings of these H twos because they're nested.
I mean, proof that here's a paragraph,
but it's a sibling to an H for an H3.
But it's nested inside of a div.
Same thing here. Here's another paragraph.
It is a sibling, a brother or sister to the H4 in the H3,
but they are not siblings to the H2 up here because this div is in the way.
There is a parent child relationship in the way
and the tilde character and the plus sign character.
Those commentators are for siblings, so elements have to share the same parent.
Now again, remember this could be any selection you want.
I'm keeping it simple with H2 and paragraphs, but it can be anything.
And notice the difference here when I hover.
It says H2, followed by a paragraph.
But there's a dot, dot, dot.
That means anything else could come in between.
And if I have the plus sign,
there is no dot, dot, dot.
This now only selects paragraphs right after an H2.
Okay.
So those are two combinations that have to do with siblings.