Select each odd/even dt element and its following dds

Question

I have a definition that looks like this:

<dl>
  <dt>Title</dt>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dt>Title</dt>  
  <dd>Entry</dd>
  <dt>Title</dt>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dt>Title</dt>
  <dd>Entry</dd>
</dl>

Is it possible to construct some selectors that targets only each odd/even dt and it's following dd's without introducing some wrapping markup?

The goal is to give an alternating background color to each dt and it's dd elements.

Here is a link with the markup.

http://jsbin.com/cehudaqobo/edit?html,css,js,output

I tried the suggested solutions but to no avail.

Answer 1

Well it's not pretty but you will have to specify the '+' rule for the amount of potential dd'

dl dt:nth-of-type(odd),
dl dt:nth-of-type(odd) + dd,
dl dt:nth-of-type(odd) + dd + dd,
dl dt:nth-of-type(odd) + dd + dd + dd
{
  background: blue;
}
dl dt:nth-of-type(even),
dl dt:nth-of-type(even) + dd,
dl dt:nth-of-type(even) + dd + dd,
dl dt:nth-of-type(even) + dd + dd + dd
{
  background: red;
}

<dl>
  <dt>Title</dt>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dt>Title</dt> 
  <dd>Entry</dd>
  <dt>Title</dt>
  <dd>Entry</dd>
  <dd>Entry</dd>
  <dt>Title</dt>
  <dd>Entry</dd>
</dl>

I feel that this jQuery would solve your problem more elegantly https://api.jquery.com/nextUntil/

Answer 2

<style>
dd:nth-child(even){ background-color:green;}
</style>