.NET開発者のためのブログメディア
CSSのnth-childの使い方とは？子要素のn番目にCSSを適用させる方法について紹介！
- SE
- CSSのnth-childの使い方を詳しく教えてください。
- PM
- それでは、CSSのnth-childを使った子要素のn番目にCSSを適用する方法についてご紹介しましょう。
目次
CSSのnth-childの使い方とは？
今回は、CSSのnth-childの使い方について説明します。nth-childを使用すれば、子要素のn番目にCSSを適用させられます。
CSSのnth-childの使い方に興味のある方はぜひご覧ください。
n番目
n番目の子要素にCSSを適用する方法を紹介します。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 |
<table> <tr><td>4番目</td> <td> <ul class="n sample1"> <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li> </ul> </td></tr> <tr><td>7番目</td> <td> <ul class="n sample2"> <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li> </ul> </td></tr> <tr><td>最初</td> <td> <ul class="n sample3"> <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li> </ul> </td></tr> <tr><td>最後</td> <td> <ul class="n sample4"> <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li> </ul> </td></tr> </table> |
CSSは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.n > li { margin-right: 4px; display: inline; } /* 4番目 */ .sample1 > li:nth-child(4) { background: lightgreen; } /* 7番目 */ .sample2 > li:nth-child(7) { background: lightgreen; } /* 最初 */ .sample3 > li:first-of-type { background: lightgreen; } /* 最後 */ .sample4 > li:last-of-type { background: lightgreen; } |
実行結果は以下のようになります。
See the Pen
css_nth-child1 by kskumd (@kskumd)
on CodePen.
n個おき
n個おきに子要素にCSSを適用する方法を紹介します。CSSは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.n > li { margin-right: 4px; display: inline; } /* 偶数 */ .sample1 > li:nth-child(even) { background: lightgreen; } /* 奇数 */ .sample2 > li:nth-child(odd) { background: lightgreen; } /* 3の倍数 */ .sample3 > li:nth-child(3n) { background: lightgreen; } /* 4の倍数 */ .sample4 > li:nth-child(4n) { background: lightgreen; } |
実行結果は以下のようになります。
See the Pen
css_nth-child2 by kskumd (@kskumd)
on CodePen.
以降や以前
n番目の子要素以降などにCSSを適用する方法を紹介します。CSSは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.n > li { margin-right: 4px; display: inline; } /* 4番目まで */ .sample1 > li:nth-child(-n+4) { background: lightgreen; } /* 後ろから4番目まで */ .sample2 > li:nth-last-child(-n+4) { background: lightgreen; } /* 3番目以降 */ .sample3 > li:nth-child(n+3) { background: lightgreen; } /* 後ろから3番目以前 */ .sample4 > li:nth-last-child(n+3) { background: lightgreen; } |
実行結果は以下のようになります。
See the Pen
css_nth-child3 by kskumd (@kskumd)
on CodePen.
not（否定）
nth-childはnotで否定できます。CSSは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.n > li { margin-right: 4px; display: inline; } /* 4番目以外 */ .sample1 > li:not(:nth-child(4)) { background: lightgreen; } /* 3の倍数以外 */ .sample2 > li:not(:nth-child(3n)) { background: lightgreen; } /* 1番目以外 */ .sample3 > li:not(:first-of-type) { background: lightgreen; } /* 最初と最後以外 */ .sample4 > li:nth-child(n+2):nth-last-child(n+2) { background: lightgreen; } |
実行結果は以下のようになります。
See the Pen
css_nth-child4 by kskumd (@kskumd)
on CodePen.
組み合わせ
nth-childは複数組み合わせることもできます。CSSは以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.n > li { margin-right: 4px; display: inline; } /* 3番目から8番目 */ .sample1 > li:nth-child(n+3):nth-child(-n+8) { background: lightgreen; } /* 3番目から8番目 かつ 偶数 */ .sample2 > li:nth-child(2n):nth-child(n+3):nth-child(-n+8) { background: lightgreen; } /* 5番目以外の奇数 */ .sample3 > li:not(:nth-child(5)):nth-child(odd) { background: lightgreen; } /* 最初と最後 */ .sample4 > li:first-of-type, .sample4 > li:last-of-type { background: lightgreen; } |
実行結果は以下のようになります。
See the Pen
css_nth-child5 by kskumd (@kskumd)
on CodePen.
- SE
- CSSのnth-childの使い方がよく分かりました。
- PM
- nth-childを使用すれば、例えば、子要素のn番目にCSSを適用させられます。否定形にすることもできますし、複数組み合わせることもできますので参考にしてください。
まとめ
いかがでしたでしょうか。CSSのnth-childの使い方について説明しました。nth-childを使用すれば、子要素のn番目にCSSを適用させられます。
ぜひご自身でソースコードを書いて、理解を深めてください。
