Web blog WEBブログ

【CSS:疑似クラス】特定の要素にだけスタイルを設定する方法

2018.04.19

こんにちは。コーダーの兼山です。

特定のコンテンツのみ、指定をしたいことがある場合、
CSS3で追加された「nth-child」擬似クラスを使うことで実装することができます。
その方法をリストタグで紹介します。

奇数番目の要素

奇数番目の要素に適用。

偶数番目の要素

偶数番目の要素に適用。

最初の要素

一番最初の要素に適用。

最後の要素

一番最後の要素に適用。

上からn番目の要素

上から3番目の要素に適用。

上からnつの要素

上から3つの要素に適用。

上からn番目以降の要素

3番目以降の要素に適用。

下からn番目の要素

下から3番目の要素に適用。

下からnつの要素

下から3つの要素に適用。

下からn番目以前の要素

下から3つ目以前の要素に適用。

Xの倍数番目の要素

3の倍数番目(3、6、9、12・・・)の要素に適用。

Xの倍数番目+nの要素

3の倍数に1を足した数番目(1、4、7、10・・・)の要素に適用。

まとめ

これらの擬似クラスの使用については、
IEはIE9以降対応となりますので注意してください。

ここでのポイントは、
『親要素で囲われている範囲内での、何番目』の指定となることを、
念頭に入れることです。

例えば、
このようなコードを指定。
<h3>タイトル</h3>
<p>テキスト</p>
<h3>タイトル</h3>
<p>テキスト</p>
   ↓
「一番最後の<h3>にだけスタイルを指定したい」ということで、
h3:last-child{
color:red; /* 文字色「赤」の指定 */
}
   ↓
一番最後の<h3>タグは、文字色が赤にならない。
・・・といった具合です。

擬似クラスでの指定は、
その都度、クラス指定をしたりする必要がないので便利です。
是非、活用してみてください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア