[Noisebridge-discuss] Is it possible to do this with CSS?

[John Magolske]

Hi all,

Just pinging the list to see if someone might know of a clever CSS
solution... I'd like to make a URL bold, where in the html markup

    * the URL-containing <a> element is immediately preceded by a <p>
    * and this <a> element is immediately followed by a <br/>

Such that, for example, the following would be rendered with the
"Lorem ipsum" as bold, but not the "nisi ut":

    <p><a href="http://www.example.org/">Lorem ipsum</a> <br/>
    dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris <a href="http://www.example.com">nisi ut</a> aliquip
    ex ea commodo consequat.</p>

The :first-child pseudo-element selector doesn't really work,

    a:first-child {font-weight: bold}

selects URLs deeper in a paragraph, selecting both <a> elements in
the above example.

And the :first-line selector will indiscriminately select the first
line of every paragraph...can't seem to find a way to limit it only
to cases where the first line begins with an <a> element and ends
with a <br/>.

I was hoping to leverage the relationship between the <a> and <br/>
elements with the adjacent sibling selector, but this only seems to
select elements that follow, not elements that precede.

Might anyone know of a clever combination of CSS rules that would
solve this challenge? For the sake of simplicity I'd like to avoid
using <h3>, <div>, <a id=...> etc in the html.

Thanks for reading :)

John


-- 
John Magolske
http://B79.net/contact