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

Why is nth-child applying to all buttons?

Why is nth-child applying to all buttons?

Problem

Here is an example of my HTML and CSS. I can't, for the life of me, figure out why the second rule is Applying to all the buttons, and not just the first three.

HTML

CSS

#test button
{
    background-color: blue;
}

#test button:nth-child(-n + 3) 
{
    background-color: red;
}

#test button:hover {
    background-color: green;
}
Problem courtesy of: JasCav

Solution

You're applying nth-child to the wrong element: there is only 1 child of each button. You mean to target the li elements:

#test ul li:nth-child(-n + 3) button
{
    background-color: red;
}

http://jsfiddle.net/fCFEn/3/

Solution courtesy of: McGarnagle

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

Why is nth-child applying to all buttons?

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×