CODEWITHSUNDEEP
htmlcss
Jackson
Jackson

Reputation: 3518

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

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.

Upvotes: 5

Views: 3744

Answers (2)

pzin
pzin

Reputation: 4248

This works for me:

dt, dd {
  background-color: blue;
}

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

Upvotes: 13

Falguni Panchal
Falguni Panchal

Reputation: 8981

try

   dt:nth-child(odd){ background-color:#eee; }
   dd:nth-child(even){ background-color:#fff; }

Upvotes: 0

Related Questions