CSS3 Selectors: Structural pseudo-class :first-child

E: first-child – This is an E element, first child of its parent.

Using the above as a guide, we can create a selector that format the first paragraph of a <div> with id=’introduction’.

This is illustrated by the example below using div#introduction p:first-child to format the first paragraph.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML Table</title>
    <style>
        div#introduction p:first-child {
            font-size: 22px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<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>

</div>
</body>
</html>

Series Navigation<< CSS3 Selectors: :required & :optional
CSS3 Selectors: Using first-child to format table header >>