今回はCSSで使うと便利な擬似クラスで順番や特定の範囲を指定するものを紹介します！
使い方はセレクタの後ろに「:（コロン）」をつけて指定します。
最初の要素を選択する方法
:first-child
:first-childは、その要素の兄弟要素の中で最初の要素を選択します。
実際にコードを見てみましょう。
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
</ul>li:first-child {
color: red;
}See the Pen fist-child by kanae (@suzukana) on CodePen.
<li>要素の最初の要素のリスト１だけを赤くなりましたね！
:first-of-type
:first-of-typeは特定の要素の中で最初に現れる要素を選択します。
同じタイプの要素が複数ある場合には、最初に現れる要素だけを選択します。
実際にコードを見てみましょう。
<p>
<strong>Apple</strong>
Banana
<strong>Orange</strong>
</p>p strong:first-of-type {
color: red;
}See the Pen :first-of-type by kanae (@suzukana) on CodePen.
<p>要素の中で最初に現れる<strong>要素だけが赤くなりました！
childとof-typeはこの後も色々出てきますが、２つの違いについては下記のリンクに詳しく載っていますのでそちらを参照ください。
奇数の要素を選択する方法
:nth-child(odd)と:nth-child(2n+1)の２パターンあります。
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
<li>リスト５</li>
<li>リスト６</li>
</ul>li:nth-child(odd){
color: red;
}
li:nth-child(2n+1) {
color: red;
}See the Pen 奇数の指定 by kanae (@suzukana) on CodePen.
違う選択方法ですが、二つとも奇数の要素が指定されていますね！
:nth-of-type()を使って選択するやり方で上記と同じように2パターンありますが、ここでは省略します。
偶数の要素を選択する方法
こちらも:nth-child(even)と:nth-child(2n)の２パターンあります。
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
<li>リスト５</li>
<li>リスト６</li>
</ul>li:nth-child(even){
color: red;
}
li:nth-child(2n) {
color: red;
}See the Pen 偶数の指定 by kanae (@suzukana) on CodePen.
こちらも:nth-of-type()を使って選択するやり方で上記と同じように2パターンありますが、ここでは省略します。
倍数で要素を選択する方法
３つごと、４ごとなど、倍数での選択ができます。
:nth-child()のカッコの中に『 n 』を使います。
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
<li>リスト５</li>
<li>リスト６</li>
</ul>li:nth-child(3n){
color: red;
}See the Pen 倍数 by kanae (@suzukana) on CodePen.
:nth-child(3n)なので３の倍数で選択されています。
○番目以降で要素を選択する方法
:nth-child()のカッコの中には『 n + x 』を使います。
例えば5番目以降を選択したい場合をみてみましょう！
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
<li>リスト５</li>
<li>リスト６</li>
<li>リスト７</li>
<li>リスト８</li>
</ul>li:nth-child(n + 5){
color: red;
}See the Pen ○番目以降 by kanae (@suzukana) on CodePen.
:nth-child(n + 5)なのでリスト５以降が全て選択されています。
○番目までの要素を選択する方法
:nth-child()のカッコの中には『 -n + x 』を使います。
5番目まで選択したい場合を見てみましょう！
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
<li>リスト５</li>
<li>リスト６</li>
<li>リスト７</li>
<li>リスト８</li>
</ul>li:nth-child(-n + 5){
color: red;
}See the Pen ○番目まで by kanae (@suzukana) on CodePen.
:nth-child(-n + 5)なのでリスト１からリスト５まで選択されています。
○番目から○番目の要素を選択する方法
上記を組み合わせて:nth-child(n + x):nth-child(-n + x)と記述して使います。
例えば2番目から6番目を選択してみましょう！
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
<li>リスト５</li>
<li>リスト６</li>
<li>リスト７</li>
<li>リスト８</li>
</ul>li:nth-child(n + 2):nth-child(-n + 6){
color: red;
}See the Pen ○番目から○番目 by kanae (@suzukana) on CodePen.
:nth-child(n + 2):nth-child(-n + 6)なのでリスト２からリスト６まで選択されています。
○番目と倍数の要素を選択する方法
何番目という選択と、そこからあとは倍数で選択する方法で選択できます。
例えば2番と３の倍数でみてみましょう！
<ul>
<li>リスト１</li>
<li>リスト２</li>
<li>リスト３</li>
<li>リスト４</li>
<li>リスト５</li>
<li>リスト６</li>
<li>リスト７</li>
<li>リスト８</li>
</ul>li:nth-child(3n + 2){
color: red;
}See the Pen ○番目と倍数 by kanae (@suzukana) on CodePen.
:nth-child(3n + 2)なのでリスト２と、それ以降は３の倍数であるリスト５とリスト８が選択されています。
まとめ
色々な選択方法を紹介しました。
紹介した方法を使うと個別でクラスを付けることなく、スタイルが当てられるのでとても便利です。
ぜひ、使えるようにしましょう！
