Search code examples
csscss-selectorssiblings

Is it possible for CSS to select both siblings and descendants?

Note: I am not asking how to select the parent.

Before I ask my question, here's some quick background.

One can use immediate sibling selectors:

p + p { background: red; }

... to select the second <p></p>:

<p></p>
<p>selected!</p>

One can use immediate child selectors:

p > span {background: red; }

... to select only a span that is the immediate child of p:

<p>
  <span></span>
</p>

Okay, great.

Now, how does one select only <p> elements that immediately follow <p>'s containing only a <br>?

<p>            <!-- when there is a p                     -->
  <br />       <!-- and it only contains a br             -->
</p>
<p>            <!-- select the p immediately following it -->
   Select me! 
</p>

I tried p > br:only-child + p {background: red;} but this is not quite right.

Solution

  • This is completely impossible.

    You cannot select a parent element based on its children.