CSS: First Selector

Question

I have an <DL> element with groups of <DT> and <DD>

I have it currently looking like this:

AAAAA   111111
        222222
        333333
BBBBB   111111
        222222
        333333

I am trying to put space between the <DT> so it looks like this:

AAAAA   111111
        222222
        333333

BBBBB   111111
        222222
        333333  

How do I get the CSS to apply a space between DT elements while maintaining the over all spacing?

Here's my CSS currently:

dl { padding: 25px 0px 25px 0px; }

dt {
    clear: left;
    float: left;
    text-align: left;
    width: 90px;
}

dd {
    margin: 0 0 0 90px;
    padding: 0 0 0 0;
}

the HTML is:

<dl>
<dt>AAAAAAA</dt>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>    

<dt>BBBBBBBB</dt>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>
<dd>11111111</dd>    
</dl>

Answer 1

You need to add padding or margin to the dt elements, plus the dd elements immediately after a dt .

Using your existing code, just add the following:

dt, dt+dd {
    margin-top:15px;
}

If you don't want the first one to have the padding, then override it on the first one with the first-of-type selector. Again, add the following:

dt:first-of-type, dt+dd:first-of-type {
    margin-top:0px;
}

jsFiddle example here: http://jsfiddle.net/C2FRn/

(note that first-of-type isn't available for IE8 or earlier; there are hacks to work around it, but if you need IE8 support, you may find it easier simply to add a class to the first dt , or use dl+dt, dt+dt+dd as the selector)