<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style rel="stylesheet">
.sample * {
background: #f2f2f2;
color: #000;
max-width: 300px;
width: 100%;
padding: 0;
margin: 0;
}
.sample div:nth-of-type(odd) {
color: #f44;
}
.sample div:nth-child(even) {
background: #ddd;
}
</style>
</head>
<body>
<div class="sample">
<div>div</div>
<div>div</div>
<p>p</p>
<div>div</div>
<div>div</div>
<div>div</div>
<p>p</p>
<p>p</p>
<p>p</p>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<p>p</p>
<div>div</div>
</div>
</body>
</html>
違いはどれが検索対象になるか
.sample div:nth-of-type(odd) は .sample1 の子要素にある全ての div のみを検索対象として、その中の奇数にあたる div を装飾している。
.sample div:nth-child(even) は .sample1 の子要素にある全てのタグを検索対象として、その中の偶数にあたる div のみを装飾している。