Hi,<div><br></div><div>From this StackOverflow discussion, it sounds like what you want to do may not be possible in general: <<a href="http://stackoverflow.com/questions/1132366/a-that-followed-by-b-css-selector">http://stackoverflow.com/questions/1132366/a-that-followed-by-b-css-selector</a>>. I hope someone will prove this wrong for this particular case though.</div>
<div><br></div><div>David<br><br><div class="gmail_quote">On Mon, May 31, 2010 at 7:32 PM, John Magolske <span dir="ltr"><<a href="mailto:listmail@b79.net">listmail@b79.net</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex;">
Hi all,<br>
<br>
Just pinging the list to see if someone might know of a clever CSS<br>
solution... I'd like to make a URL bold, where in the html markup<br>
<br>
 � �* the URL-containing <a> element is immediately preceded by a <p><br>
 � �* and this <a> element is immediately followed by a <br/><br>
<br>
Such that, for example, the following would be rendered with the<br>
"Lorem ipsum" as bold, but not the "nisi ut":<br>
<br>
 � �<p><a href="<a href="http://www.example.org/" target="_blank">http://www.example.org/</a>">Lorem ipsum</a> <br/><br>
 � �dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br>
 � �tempor incididunt ut labore et dolore magna aliqua.</p><br>
 � �<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco<br>
 � �laboris <a href="<a href="http://www.example.com" target="_blank">http://www.example.com</a>">nisi ut</a> aliquip<br>
 � �ex ea commodo consequat.</p><br>
<br>
The :first-child pseudo-element selector doesn't really work,<br>
<br>
 � �a:first-child {font-weight: bold}<br>
<br>
selects URLs deeper in a paragraph, selecting both <a> elements in<br>
the above example.<br>
<br>
And the :first-line selector will indiscriminately select the first<br>
line of every paragraph...can't seem to find a way to limit it only<br>
to cases where the first line begins with an <a> element and ends<br>
with a <br/>.<br>
<br>
I was hoping to leverage the relationship between the <a> and <br/><br>
elements with the adjacent sibling selector, but this only seems to<br>
select elements that follow, not elements that precede.<br>
<br>
Might anyone know of a clever combination of CSS rules that would<br>
solve this challenge? For the sake of simplicity I'd like to avoid<br>
using <h3>, <div>, <a id=...> etc in the html.<br>
<br>
Thanks for reading :)<br>
<br>
John</blockquote></div></div>