What workarounds exist for the `:first-child` pseudo class not being sufficient in this example?

Question

I have some basic HTML...

<div id="panel">
    <h3>abc</h3>
    <address>a</address>
    <address>b</address>
    <address>c</address>
</div>

...and CSS...

#panel address:first-child {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}

jsFiddle.

I always took :first-child to mean first child of that element (address in this example). I realise in the strictest sense the first child would be the h3 element, but I always believed that's how it worked.

According to the W3C spec, I'm wrong...

The :first-child pseudo-class matches an element that is the first child element of some other element.

Is there a workaround to selecting the first address element without resorting to changing the HTML (i.e. adding a class or id attribute)?

If I need to modify the HTML, so be it, but I had in the back of my mind that I have overlooked something obvious.

Answer 1

Is there a workaround to selecting the first address element without resorting to changing the HTML?

#panel h3 + address {
    padding-bottom: 1em;
    border-bottom: 1px solid #e0e3e6;
}