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?

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

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.
0/5 (0 Reviews)

Like this article?

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Related Posts