CSS Nth Child Selectors
This morning's class challenge was to make a CSS selector challenge, for your classmates to solve. I wrote this challenge:
Give the first h2 under .items red text. Give the second h2 under .items green text. Give the third h2 under .items blue text.
The HTML code was:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- CSS style sheets -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Selectors</title>
</head>
<body>
<section class="items">
<h1>Cool Items</h1>
<div class="item">
<h2>Item 1</h2>
</div>
<div class="item">
<h2>Item 2</h2>
</div>
<div class="item">
<h2>Item 3</h2>
</div>
</section>
<section>
<h2>Secondary Items</h2>
<p>Don't select these items</p>
<div class="item">
<h2>Secondary Item</h2>
</div>
<div clss="item">
<h2>Another secondary item</h2>
</div>
</section>
</body>
</html>
My solution was this CSS style sheet:
.item:nth-child(2) h2 {
color: red;
}
.item:nth-child(3) h2 {
color: green;
}
.item:nth-child(4) h2 {
color: blue;
}
We had to start counting at 2 because of the line
<section class="items">
That line was caught as the first .item.