Robert Robert - 7 months ago 13
HTML Question

Styling every row but the first in HTML definition list

What's the simplest selector for styling every row (by row I mean every

dd
-
dt
pair, which in my mind seem to appear on the same line) of the definition list, but the first? I need to set the top margin.

<dl>
<dt>...</dt>
<dd>...</dd>

<dt>...</dt>
<dd>...</dd>

<dt>...</dt>
<dd>...</dd>

(...)
</dl>


My aim is below. Is there a simpler way to write it?

dl > dt:not(:first-of-type),
dl > dd:not(:first-of-type) {
margin: 1mm 0 0 0;
}

Answer

from my comment:

just use dt+dt or dt ~ dt if there's dd in between , first one will not apply the style

To also style dd behind , repeat the selector and use it as well for dd : dt ~dt ~dd

dt ~dt {
  color: red;
}
dt ~dt ~dd {
  color: tomato;
}
<dl>
  <dt> first</dt>
  <dd>in between</dd>
  <dt>not first</dt>
  <dd>in between</dd>
  <dt> not first</dt>
  <dd>in between</dd>
</dl>