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;
}