CSS selector to target the last of br-tags that appear in pairs within a p-tag?

Question

I would like to normalize the spacing between line-breaks and paragraphs in some text.

To do this I wish to collapse all line-breaks so that they yield no height in themselves, and then add margin-bottom to the last of two consecutive <br> tags.

Is there a css-selector that let's me select the last of <br> tags that appear in pairs within a <p>?

<p>
   Some text<br />
   Some more text<br /><br /> <!-- I wan't to target the last of these -->
   Even more text<br /> <!-- Not this one -->
</p>

I tried the following selectors, but no dice. It seems the + selector ignores the text and becomes to greedy.

p br {
    line-height: 0;
    height:0;
    margin:0;
    padding:0;
    content: " ";
    display: block;
}

p br + br {
    margin-bottom: 1em;
}

An example: http://jsfiddle.net/jqcyc/

Is this at all possible with the given markup, preferably without any javascript?

Answer 1

Raw text is, in some way, invisible to CSS selectors. According to your HTML, CSS sees it as:

<p>
    <br />
    <br /><br /> <!-- I wan't to target the last of these -->
    <br /> <!-- Not this one -->
</p>

So every <br /> but the first one is matched with the p br + br selector. There's no way to resolve your problem in the way you're approaching it (raw CSS).

Other approaches are JavaScript or server-side (whatever language you're using - PHP, Java etc.).

Answer 2

If you're always going to have the same amount of br tags, you can use br:nth-child(n) to select them.

An example being: br:nth-child(2){ height:12345px; }