CSSのnth-childの使い方とは？子要素のn番目にCSSを適用させる方法について紹介！

ツール・ソフトウェア

公開日時: 2021-10-08

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は以下のように記述します。

<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>

<table>

<td>

</ul>

</td></tr>

<td>

</ul>

</td></tr>

<td>

</ul>

</td></tr>

<td>

</ul>

</td></tr>

</table>

CSSは以下のように記述します。

.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;
}

.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は以下のように記述します。

.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;
}

.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は以下のように記述します。

.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;
}

.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は以下のように記述します。

.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;
}

.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は以下のように記述します。

.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;
}

.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。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

CSSのnth-childの使い方とは？子要素のn番目にCSSを適用させる方法について紹介！

CSSのnth-childの使い方とは？

n番目

n個おき

以降や以前

not（否定）

組み合わせ

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

CSS新着案件New Job

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

RedmineプラグインおよびWEB開発/Ruby/東京都中央区/【WEB面談可】/在宅勤務

Webシステム開発/東京都江東区/【WEB面談可】/テレワーク

Webマーケティング施策の運用サポート/CSS/東京都千代田区/【WEB面談可】

空港案内表示画面開発/HTML/神奈川県鎌倉市/【WEB面談可】

空港案内表示画面の運用保守/HTML/神奈川県鎌倉市/【WEB面談可】

CSSのnth-childの使い方とは？子要素のn番目にCSSを適用させる方法について紹介！

CSSのnth-childの使い方とは？

n番目

n個おき

以降や以前

not（否定）

組み合わせ

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

CSS新着案件New Job

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

RedmineプラグインおよびWEB開発/Ruby/東京都中央区/【WEB面談可】/在宅勤務

Webシステム開発/東京都江東区/【WEB面談可】/テレワーク

Webマーケティング施策の運用サポート/CSS/東京都千代田区/【WEB面談可】

空港案内表示画面開発/HTML/神奈川県鎌倉市/【WEB面談可】

空港案内表示画面の運用保守/HTML/神奈川県鎌倉市/【WEB面談可】

関連記事Related Posts