CSS3 Selectors: Only-child

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

:only-child works as you would have expected.

It targets the only child of its parent.

This could be helpful when you are retrieving a list from the database and there is only one item in the list.

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>Lists</title>
    <style>
        ul li:only-child {
            color: blue;
        }
    </style>
</head>
<body>

<h4>British Pop</h4>
<ul>
    <li>Cold Play</li>
    <li>Depeche Mode</li>
    <li>Adele</li>
</ul>

<h4>American Rock</h4>
<ul>
    <li>Metalica</li>
</ul>

</body>
</html>


Lists

CSS3 Selectors: nth-last-child

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

E:nth-last-child(n):- An E element, the n-th child of its parent, counting from the last one.

This is another option available for targeting one or more specific children of a given parent element.
 
HTML Table

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML Table</title>
    <style>
        div#introduction p:nth-last-child(1) {
            color: blue;
            font-family: Arial;
        }
    </style>
</head>
<body>
<div id='introduction'>
    <p>Ushuaia is the capital of Tierra del Fuego.</p>

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

    <p>Ushuaia is bounded on the north by the Martial mountain range and on the south by the Beagle Channel.</p>

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

CSS3 Selectors: Format alternate rows in a table using nth-child

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

If you notice the table in this site, the alternate rows in the table have been formatted differently.

We can use tr:nth-child(even) to format the even rows in the table.

HTML Table

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML Table</title>
        <style>
            tr:nth-child(even) {
                background: lightgray;
            }
        </style>
</head>
<body>
<table border='1'>
    <tr>
        <th>ID</th>
        <th>artiste</th>
        <th>album</th>
        <th>year</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Rod Stewart</td>
        <td>Maggie May</td>
        <td>1973</td>
    </tr>
    <tr>
        <td>2</td>
        <td>New Order</td>
        <td>Substance</td>
        <td>1987</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Nirvana</td>
        <td>Smell Like Teen Spirit</td>
        <td>1992</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Rod Stewart</td>
        <td>Out Of Order</td>
        <td>1988</td>
    </tr>
</table>
</body>
</html>

 

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>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML Table</title>
    <style>
        div#introduction p:nth-child(odd) {
            font-size: 22px;
            color: blue;
            font-family: Arial;
        }
    </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>

CSS3 Selectors: Structural pseudo class :nth-child(n)

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

E:nth-child(n):-  This is a structural pesudo-class.

An E element, the n-th child of its parent.

We use the example below to format the second paragraph with the <p> tag.

This is done by div#introduction p:nth-child(2).

<!DOCTYPE html>
<html>
<head lang='en'>
    <meta charset='UTF-8'>
    <title>HTML Table</title>
    <style>
        div#introduction p:nth-child(2) {
            font-size: 22px;
            color: blue;
            font-family: Arial;
        }
    </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>