Select each element of odd / even dt and next dds
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 build multiple selectors that only target every odd / even dt and after dd without introducing any packing markup?
The goal is to give an alternating background color for each dt and dd element.
Here is the markup link.
http://jsbin.com/cehudaqobo/edit?html,css,js,output
I have tried the suggested solutions but to no avail.
+3
source to share
1 answer
Well, this is not very good, but you will need 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 like this jQuery will solve your problem more elegantly https://api.jquery.com/nextUntil/
+1
source to share