How could I alternate background-color between odd/even <dd> rows

css, html

Solution

This works for me:

dt, dd {
  background-color: blue;
}

dt:nth-child(4n+1), dt:nth-child(4n+1) + dd {
  background-color: red;
}

Problem

I have a definition list as follows: ``` <dt>Term1</dt> <dd>Definition1</dd> <dt>Term2</dt> <dd>Definition2</dd> <dt>Term3</dt> <dd>Definition3</dd> <dt>Term4</dt> <dd>Definition4</dd> ``` I would like to use CSS to give every odd row a different background-color using nth-child(odd) but this does not work with the structure of the definition list unless I can group each dt and dd together in a wrapper. Does anybody know of a way I could achieve this alternating background effect? Thanks EDIT** I should have pointed out that I need the Term and the Definition to appear side by side. So each pair of DT & DD should have alternating colors.

Original source