How to select the first occurring element after another element?

Question

Aryan Kumar · Answer

To select the first occurring element after another element, you can use the + selector in CSS. The + selector matches an element that is immediately preceded by another element. For example, the following CSS will select the first p element that is immediately after an h1 element:

CSS

h1 + p {
  color: red;
}

Here is an example of how you can use the + selector to select the first occurring element after another element in HTML:

HTML

<h1>This is the heading</h1>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>

The following CSS will set the color of the first p element after the h1 element to red:

CSS

h1 + p {
  color: red;
}

This will change the color of the first p element to red, but will not affect the other p elements.

You can also use the + selector to select all of the elements that are immediately after another element. For example, the following CSS will select all of the p elements that are immediately after an h1 element:

CSS

h1 + p {
  color: red;
}

Here is an example of how you can use the + selector to select all of the elements that are immediately after another element in HTML:

HTML

<h1>This is the heading</h1>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>

This CSS will set the color of all of the p elements to red.

forum

How to select the first occurring element after another element?

Can you answer this question?

1 Answers