nth-of-type allows you to automatically format HTML texts based off of simple rules.
nthStyle.css
.title {
border: 2px solid black;
}
h2:nth-of-type(even){
background: yellow;
font-style: italic;
}
div:nth-of-type(2n+1){
background: lightgrey;
}
li:nth-of-type(odd){
background: lightblue;
}
li:nth-of-type(even){
background: pink;
}nth.html
<html>
<head>
<link rel="stylesheet" href="nthStyle.css" />
</head>
<body>
<h1 class="title">This is a Basic nth Example using the H2 Tag</h1>
<h2>Stuff that is in a H2 tag</h2>
<h2>Stuff that is in a H2 tag</h2>
<h2>Stuff that is in a H2 tag</h2>
<h2>Stuff that is in a H2 tag</h2>
<h2>Stuff that is in a H2 tag</h2>
<h2>Stuff that is in a H2 tag</h2>
<h2>Stuff that is in a H2 tag</h2>
<h1 class="title">This is an nth example using DIV tags</h1>
<div class="nthClass">
<h1>This is a DIV with an nth Class</h1>
<p>Some more text to prove something</p>
</div>
<div class="nthClass">
<h1>This is a DIV with an nth Class</h1>
<p>Some more text to prove something</p>
</div>
<div class="nthClass">
<h1>This is a DIV with an nth Class</h1>
<p>Some more text to prove something</p>
</div>
<div class="nthClass">
<h1>This is a DIV with an nth Class</h1>
<p>Some more text to prove something</p>
</div>
<div class="nthClass">
<h1>This is a DIV with an nth Class</h1>
<p>Some more text to prove something</p>
</div>
<div class="nthClass">
<h1>This is a DIV with an nth Class</h1>
<p>Some more text to prove something</p>
</div>
<h1 class="title">This is an nth example using a List</h1>
<ol>
<li> item 1</li>
<li> item 2</li>
<li> item 3</li>
<li> item 4</li>
<li> item 5</li>
<li> item 6</li>
</ol>
</body>
</html>
Be the first to comment