Choosing one of the elements in a pair using pure CSS

Question

Is there a way to select one element immediately following (or preceding) another pure CSS?

For example, hide one of <br> in a pair of <br><br> :

 <p>text text <br><br>text text <br>text text <br><br>text text</p> <p>text text <br>text text <br><br>text text <br><br>text text</p> <p>text text <br><br>text text <br>text text <br><br>text text</p> 

and get it at the end, like:

 <p>text text <br>text text <br>text text <br>text text</p> <p>text text <br>text text <br>text text <br>text text</p> <p>text text <br>text text <br>text text <br>text text</p> 

display: none; for br + br or br ~ br does not work as described above.

Answer 1

The problem is that the only thing that separates your br elements is the text. CSS Sibling combinators ignore all non-element nodes between elements, including (but not limited to) comments, text and spaces, so as far as CSS is concerned, all of your paragraphs have exactly five consecutive br children each:

 <p> <br><br> <br> <br><br> </p> <p> <br> <br><br> <br><br> </p> <p> <br><br> <br> <br><br> </p> 

That is, each br after the first in each paragraph is br + br (and by extension also a br ~ br ).

You will need to use JavaScript to repeat the paragraphs, find tags for br elements that immediately follow or precede another br node element, not a text node, and delete the other node mentioned.

 var p = document.querySelectorAll('p'); for (var i = 0; i < p.length; i++) { var node = p[i].firstChild; while (node) { if (node.nodeName == 'BR' && node.nextSibling.nodeName == 'BR') p[i].removeChild(node.nextSibling); node = node.nextSibling; } } 

 <p>text text <br><br>text text <br>text text <br><br>text text</p> <p>text text <br>text text <br><br>text text <br><br>text text</p> <p>text text <br><br>text text <br>text text <br><br>text text</p> 

Answer 2

This is probably unreliable, but it works, at least on Firefox:

 br { display: block; } 

 br { display: block; } 

 <p>text text <br><br>text text <br>text text <br><br>text text</p> <p>text text <br>text text <br><br>text text <br><br>text text</p> <p>text text <br><br>text text <br>text text <br><br>text text</p>