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

css, css-selectors

Solution

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.).

Problem

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?

Original source