こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、14年目エンジニアです。
この記事では、 cssで子要素に特定のスタイルを指定できるnth-child疑似クラスについて
- nth-child疑似クラスとは
- nth-child疑似クラスの使い方
- nth-child疑似クラスを使ったサンプルプログラム
と、丁寧に解説していきます。
前提条件：実行環境について
実行環境は以下の通りです。
| OS | Windows11 |
|---|
nth-child疑似クラスとは
nth-child疑似クラスとは、子要素をインデックスを使ってスタイルを指定できる疑似クラスです。
リストやテーブルで使うと便利です。
nth-child疑似クラスを使うと
こんな感じでul要素の子供であるli要素でインデックスが奇数だと背景色を赤、偶数だと黄色というようにスタイルを指定できます。
nth-child疑似クラスの使い方
nth-child疑似クラスは
|
1 2 3 |
【要素】:nth-child(【インデックス】) { /* 適応させたいスタイル */ } |
というように書きます。
【インデックス】は「1」から始まります。
「N」を使って指定すれば自動で0から始まるので、倍数など簡単に指定できます。
指定できるものでよく使うであろうパターンを表にまとめました。
| 指定できるパターン | 説明 | 例 | ||||
|---|---|---|---|---|---|---|
| 数値 | 指定した数のインデックスの要素のみにスタイルを適応させる |
|
||||
| 偶数 | 偶数のインデックスの要素のみにスタイルを適応させる |
または
|
||||
| 奇数 | 奇数のインデックスの要素のみにスタイルを適応させる |
または
|
||||
| 倍数 | 指定した倍数のインデックスの要素のみにスタイルを適応させる |
|
||||
| 指定した数値以外 | 指定した数値のインデックスの要素以外にスタイルを適応させる |
|
では、次の章で実際に使い動作を確認します。
nth-child疑似クラスサンプルの概要
nth-child疑似クラスサンプルでは、
- HTML
- css
の2ファイルを使います。
リストとテーブルを用意します。
リストはli要素、テーブルはtr要素それぞれ偶数と奇数に対してスタイルを適応させます。
フォルダ構成は以下のようになっています。
HTMLサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html> <html> <head> <title>nth-child疑似クラスサンプル</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/sample.css" type="text/css"> </head> <body> <h3>li要素に指定した場合</h3> <ol> <li>リンゴ</li> <li>オレンジ</li> <li>ブドウ</li> <li>パイナップル</li> </ol> <h3>tr要素に指定した場合</h3> <table> <tr> <th>ID</th> <th>名前</th> <th>年齢</th> </tr> <tr> <td>1</td> <td>田中</td> <td>23</th> </tr> <tr> <td>2</td> <td>鈴木</td> <td>78</th> </tr> <tr> <td>3</td> <td>石井</td> <td>44</th> </tr> <tr> <td>4</td> <td>山田</td> <td>12</th> </tr> </table> </body> </html> |
cssサンプル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
li:nth-child(odd) { color: red; } li:nth-child(even) { color: brown; } tr:nth-child(2N) { background-color: greenyellow; } tr:nth-child(2N + 1) { background-color: cyan; } |
実行結果
作成したHTMLをブラウザで開きます。
リストもテーブルも指定したインデックスのスタイルが指定できていることが確認できました。
まとめ：nth-child疑似クラス使ってみよう
以上がcssのnth-child疑似クラスについての解説でした！
あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ
コメント