vanaf1979/nth-of-type-even-odd.html

## nth-of-type-even-odd.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>nth-of-type even and odd selectors</title>
</head>
<body>

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</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:nth-of-type(odd) {
        background: green; /* This will select all odd children */
    }

    ul li:nth-of-type(even) {
        background: orange; /* This will select all even children */
    }
</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>nth-of-type even and odd selectors</title>
	</head>
	<body>

	<ul>
	<li>First</li>
	<li>Second</li>
	<li>Third</li>
	<li>Fourth</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:nth-of-type(odd) {
	background: green; /* This will select all odd children */
	}

	ul li:nth-of-type(even) {
	background: orange; /* This will select all even children */
	}
	</style>

	</body>
	</html>