vanaf1979/nth-of-type.html

## nth-of-type.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>first-child, last-child and nth-of-type selectors</title>
</head>
<body>

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fifth</li>
</ul>

<style>
    body {
        padding: 0;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    ul {
        width: 200px;
        list-style: none;
        padding: 0;
    }

    li {
        padding: 0.5rem 1rem;
    }

    ul li:first-child {
        background: red; /* This will select the first child */
    }

    ul li:nth-of-type(2) {
        background: green; /* This will select the second child */
    }

    ul li:nth-of-type(3) {
        background: pink; /* This will select the third child */
    }

    ul li:last-child {
        background: blue; /* This will select the last child */
    }
</style>

</body>
</html>

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>first-child, last-child and nth-of-type selectors</title>
	</head>
	<body>

	<ul>
	<li>First</li>
	<li>Second</li>
	<li>Third</li>
	<li>Fifth</li>
	</ul>

	<style>
	body {
	padding: 0;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	ul {
	width: 200px;
	list-style: none;
	padding: 0;
	}

	li {
	padding: 0.5rem 1rem;
	}

	ul li:first-child {
	background: red; /* This will select the first child */
	}

	ul li:nth-of-type(2) {
	background: green; /* This will select the second child */
	}

	ul li:nth-of-type(3) {
	background: pink; /* This will select the third child */
	}

	ul li:last-child {
	background: blue; /* This will select the last child */
	}
	</style>

	</body>
	</html>