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