There are two sibling combinators that can be used to select elements contained within the same parent element; the general sibling combinator (~) and the adjacent sibling combinator (+). Referring to example below, which elements will the styles be applied to?

elements will the styles be applied to?
h2 ~ p {
color: blue;
}
h2 + p {
background: beige;
}
<section>
<p>paragraph 1</p>
<h2>Heading</h2>
<p>paragraph 2</p>
<p>paragraph 3</p>
</section>

  • Paragraphs 2 and 3 will be blue. The h2 and paragraph 2 will have a beige background.
  • Paragraphs 2, and 3 will be blue, and paragraph 2 will have a beige background.
  • Paragraphs 2 and 3 will be blue. Paragraph 2 will have a beige background.
  • Paragraph 2 will be blue. Paragraphs 2 and 3 will have a beige background.
Join our list

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Leave a Comment

Share via
Join our list

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Send this to a friend