CSSのnth-childの使い方とは？子要素のn番目にCSSを適用させる方法について紹介！
- システム
エンジニア - CSSのnth-childの使い方を詳しく教えてください。
- プロジェクト
マネージャー - それでは、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.
- システム
エンジニア - CSSのnth-childの使い方がよく分かりました。
- プロジェクト
マネージャー - nth-childを使用すれば、例えば、子要素のn番目にCSSを適用させられます。否定形にすることもできますし、複数組み合わせることもできますので参考にしてください。
まとめ
いかがでしたでしょうか。CSSのnth-childの使い方について説明しました。nth-childを使用すれば、子要素のn番目にCSSを適用させられます。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
CSS新着案件New Job
-
ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務
月給26万～26万円東京都千代田区(秋葉原駅) -
RedmineプラグインおよびWEB開発/Ruby/東京都中央区/【WEB面談可】/在宅勤務
月給65万～65万円東京都中央区(新富町駅) -
Webシステム開発/東京都江東区/【WEB面談可】/テレワーク
月給32万～34万円東京都江東区(豊洲駅) -
Webマーケティング施策の運用サポート/CSS/東京都千代田区/【WEB面談可】
月給33万～48万円東京都千代田区(神田駅) -
空港案内表示画面開発/HTML/神奈川県鎌倉市/【WEB面談可】
月給60万～70万円神奈川県鎌倉市(大船駅) -
空港案内表示画面の運用保守/HTML/神奈川県鎌倉市/【WEB面談可】
月給50万～60万円神奈川県鎌倉市(大船駅)
