要素名:nth-of-type()
CSSのセレクタ で要素の順番（番号・奇数・偶数・倍数など）を指定することができます。
主な指定方法は以下の３種類となります。
- ()内に数値入力で順番指定。
E:nth-of-type(3){プロパティ:値}
- ()内にキーワード指定「even」で偶数、「odd」で奇数を指定。
E:nth-of-type(even){プロパティ:値} , E:nth-of-type(odd){プロパティ:値}
- ()内に数値nで倍数指定。
E:nth-of-type(3n){プロパティ:値}
nth-of-typeの記述例（class名などは任意）：
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex,nofollow">
<title>順番を指定する擬似クラス</title>
<style media="screen">
.num ul li:nth-of-type(3){
background-color: #ff0
}
.odd ul li:nth-of-type(odd){
background-color: #f00
}
.even ul li:nth-of-type(odd){
background-color: #0f0
}
.n ul li:nth-of-type(3n){
background-color: #0ff
}
</style>
</head>
<body>
<h1>順番を指定する擬似クラス（番号・奇数・偶数）</h1>
<section class="num">
<h2>番号（例：3番目）を指定</h2>
<p>3番目のリストの背景色のみイエローになります。</p>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</section>
<section class="odd">
<h2>奇数番目のリストを指定</h2>
<p>奇数番目のリストの背景色のみレッドになります。</p>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</section>
<section class="even">
<h2>偶数番目のリストを指定</h2>
<p>偶数番目のリストの背景色のみグリーンになります。</p>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</section>
<section class="n">
<h2>倍数（例：3の倍数）のリストを指定</h2>
<p>3の倍数のリストの背景色のみライトブルーになります。</p>
<ul>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
<li>リスト</li>
</ul>
</section>
</body>
</html>
