Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

:nth-child() odd/even pseudo classes with definition list

:nth-child() odd/even pseudo classes with definition list

Problem

I can't figure out how to apply the odd/even :nth-child() pseudo classes to definition lists

green foo
green bar
red foo
red bar
green foo
green bar

http://jsfiddle.net/8Ge5h/2/

new fiddle:

http://jsfiddle.net/8Ge5h/7/

with the correct :nth-of-type pseudo class.

dd:nth-of-type(even) {color: red;}
dt:nth-of-type(even) {color: red;}
dd:nth-of-type(odd) {color: green;}
dt:nth-of-type(odd) {color: green;}

Problem courtesy of: helgatheviking

Solution

In HTML, both dt and dd are siblings of one another, under the same parent dl. As such, if you're alternating between dt and dd in a single dl, then all your dt elements will be :nth-child(odd) while all your dd elements will be :nth-child(even).

You're probably looking for :nth-of-type() instead, which will help you check only either the dt or dd type, unlike :nth-child() which doesn't care what kind of element it is, only its position relative to the parent.

If you want to make every odd dd green and every even dd red:

dd:nth-of-type(odd) { color:green }
dd:nth-of-type(even) { color:red }​

Updated fiddle

Solution courtesy of: BoltClock

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

:nth-child() odd/even pseudo classes with definition list

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×