nth child selector in CSS (example 3)

by danielkwood

HTML

<html>
    <head>
        <title>The nth-child selector</title>
        <link rel="stylesheet" href="theme.css" type="text/css"/>
    </head>
    <body>
        <div class="content">
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p>The quick brown fox jumps over the lazy dog.</p>
            <p>The quick brown fox jumps over the lazy dog.</p>
        </div>
    </body>
</html>

CSS

/* Selects only 5th element */
.content p:nth-child(5){
    font-weight: bold;
}

/* Selects odd elements */
.content p:nth-child(odd){
    color: red;
}

/* Selects every 3rd element */
.content p:nth-child(3n){
    text-decoration: underline;
}

/* Selects all except first 4 elements */
.content p:nth-child(n+5){
    font-family: Arial;
}

/* Selects only first 4 elements */
.content p:nth-child(-n+4){
    font-style: italic;
}

/* Selects every 3rd element starting from the 2nd element */
.content p:nth-child(3n+2){
    background-color: yellow;
}