CSS3 Selectors: nth-child

This entry is part 28 of 40 in the series CSS3 Selectors

:nth-child allows us to target one or more specific children of a given parent element.

It can take the form of a number (integer), keywords (odd or even), or a calculation (expression).

In the example below, we use the keyword odd to target the 1st and the 3rd paragraphs.

<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML Table</title>
        div#introduction p:nth-child(odd) {
            font-size: 22px;
            color: blue;
            font-family: Arial;
<div id='introduction'>
    <p>Ushuaia is the capital of Tierra del Fuego, Antártida e Islas del Atlántico Sur Province.</p>

    <p>It is commonly regarded as the southernmost city in the world.</p>

    <p>Ushuaia is located in a wide bay on the southern coast of Isla Grande de Tierra del Fuego, bounded on the north
        by the Martial mountain range and on the south by the Beagle Channel.</p>


Series Navigation<< CSS3 Selectors: Structural pseudo class :nth-child(n)
CSS3 Selectors: Format alternate rows in a table using nth-child >>

Leave a comment

Leave a Reply