:nth-child pseudo-class

Question

Hi guys. I'm trying to understand how the :nth-child pseudo class works.

I can make it work with simple values and with keywords (odd / even). But, when i try to put a function, it just doesn't work.

This is the html:

<!DOCTYPE html>
<html>
<head>
    <title>Structural Pseudo-classes</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
        <li>List item 5</li>
        <li>List item 6</li>
        <li>List item 7</li>
    </ul>
</body>
</html>

This is the stylesheet:

li {
    width: 100px;
    height: 30px;

    margin: 2px auto;
    padding: 20px;

    background: #ccc;

    list-style: none;

    font: 20px sans-serif;
    color: tomato;
}

li:nth-child(1n4) {color: black;}

I do understand the theory behind that ":nth-child(1n4)". But no matter what, i can't have the effect that i'm trying to have ( color black to all the li from the 4th).

Instead, if i use those:

li:nth-child(5) {background: black;}
li:nth-child(even) {color: orange;}

It will work fine. I can say it even without refreshing my browser because sublime text change the font style form normal to italic when i type a pseudo-class.

What i'm doing wrong?

Answer 1 · 2014-11-01T17:33:58Z

November 1, 2014 5:33pm

If I understood you correctly, you want to add color black from 4 to 7....I haven't done nth-child and css in a long time, but I believe this is what you are looking for: li:nth-child(1n+4)

Answer 2 · 2014-11-01T17:58:02Z

November 1, 2014 5:58pm

Ya, the plus sign was the thing that made my code invalid. Thanks!

Welcome to the Treehouse Community

Looking to learn something new?

Soufiane Bdaoui

Soufiane Bdaoui

:nth-child pseudo-class

2 Answers

Paolo Scamardella

Paolo Scamardella

Soufiane Bdaoui

Soufiane Bdaoui