Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Selectors Advanced Selectors :nth-child

Sean Flanagan
Sean Flanagan
33,235 Points
Posted by Sean Flanagan
Sean Flanagan
33,235 Points

Can't change the even-numbered list items

Hi.

I typed in the code as instructed but I couldn't modify the even-numbered list items.

Here's my HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/style.css">
    <style>
        body {
            font-family: 'Nunito', sans-serif;
            color: #616161;
            padding: 40px 0;
        }
        ul {
            list-style: none;
            width: 50%;
            margin: auto;
        }
        li {
            border-bottom: 1px dotted;
            padding: 15px 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>
        <li>Item 10</li>        
    </ul>
</body>
</html>

And my CSS:

/* :nth-child Pseudo-classes------------------ */

li:nth-child (even) {
  background: #52bab3;
  color: white;
}

I would appreciate any help.

Sean

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

I just want to know why the even-numbered list items won't take the aqua background and white text.

Thanks.

Sean

3 Answers

Sean Flanagan
Sean Flanagan
33,235 Points
Sean Flanagan
Sean Flanagan
33,235 Points

Hi Petar.

I did as you suggested, deleted the space between li:nth-child and (even), saved my CSS page and refreshed the browser, and hey presto, it worked. Congratulations on having your post upvoted and on getting the Best Answer.

Thank you very much

Sean :-)

Petar Popovic
PLUS
Petar Popovic
Courses Plus Student 23,421 Points
Petar Popovic
Petar Popovic
Courses Plus Student 23,421 Points

Answer is very simple, you have a space between li:nth-child (even) and that is not right. Below is good code. Sometimes a small mistake like this can make things go wrong :(

li:nth-child(even) {
  background: #52bab3;
  color: white;
}
Victor Rebello
Victor Rebello
2,322 Points
Victor Rebello
Victor Rebello
2,322 Points

You have space between :nth-child and (even). The correct code is as follows

li:nth-child(even) {
  background:#52bab3; 
  color:white;

}