全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
【CSS：疑似クラス】特定の要素にだけスタイルを設定する方法
2018.04.19
※この記事は2018年04月19日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
特定のコンテンツのみ、指定をしたいことがある場合、
CSS3で追加された「nth-child」擬似クラスを使うことで実装することができます。
その方法をリストタグで紹介します。
- 1. 奇数番目の要素
- 2. 偶数番目の要素
- 3. 最初の要素
- 4. 最後の要素
- 5. 上からn番目の要素
- 6. 上からnつの要素
- 7. 上からn番目以降の要素
- 8. 下からn番目の要素
- 9. 下からnつの要素
- 10. 下からn番目以前の要素
- 11. Xの倍数番目の要素
- 12. Xの倍数番目+nの要素
奇数番目の要素
奇数番目の要素に適用。
偶数番目の要素
偶数番目の要素に適用。
最初の要素
一番最初の要素に適用。
最後の要素
一番最後の要素に適用。
上から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＞タグは、文字色が赤にならない。
・・・といった具合です。
擬似クラスでの指定は、
その都度、クラス指定をしたりする必要がないので便利です。
是非、活用してみてください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…
