2

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.

user3621156
  • 65
  • 1
  • 7
  • 2
    It won't work, since it would involve reaching the child and going back to the parent... And parent travelling is something css selectors can't do – LcSalazar Feb 06 '15 at 14:50
  • Yeah unfortunately you would need some javascript to do this, at which point it might be too much overhead, depends on your implementation. – Jordan Feb 06 '15 at 14:53
  • Are you okay for a JS solution as well? – LcSalazar Feb 06 '15 at 14:54
  • Related question: http://stackoverflow.com/questions/2000582/css-selector-for-foo-that-contains-bar – Simone Feb 06 '15 at 14:54
  • @LcSalazar & Jordan You both answered my question fully. Thanks to the both of you! – user3621156 Feb 06 '15 at 15:27
  • You may not be asking how to select the parent, but you are looking to match an element based on its nature as a parent of another element, which is the same principle. Consequently, you're not asking to "select both the sibling and the descendant", but you're looking to express a complex relationship that involves both. The simple answer is that this cannot be expressed using what is currently offered in selector syntax. – BoltClock Feb 06 '15 at 15:38
  • It's sad that we can write `p:empty + p` but not `p:contains(br) + p`. The former checks descendants and siblings just like the latter. – user3621156 Feb 06 '15 at 15:48

1 Answers1

2

This is completely impossible.

You cannot select a parent element based on its children.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • Yeah unfortunately you would need some javascript to do this, at which point it might be too much overhead, depends on your implementation. – Jordan Feb 06 '15 at 14:51
  • Woops, I thought that's what I clicked, my bad – Jordan Feb 06 '15 at 14:53