CSSで疑似クラス”:nth-child”を使いこなそう!!

  • このエントリーをはてなブックマークに追加
こんにちは。
OWLetを勉強中のフロントエンド・エンジニア見習い、迫田です。
前回の記事から約3カ月が経ち、少しずつ仕事にも慣れてきました。

今回は、疑似クラス:nth-childについてアウトプットしてみようと思います。
これがあればデザインの幅が広がること間違いなしです!

:nth-childで何ができるの?

 

同じclassの〇番目の部分のデザインだけを変えたい!といったことが可能です。
例えば、下の図のようなリストを作ったとします。

 

HTML

<ul>

<li>サンプル1</li>

<li>サンプル2</li>

<li>サンプル3</li>

<li>サンプル4</li>

</ul>

表層

  • サンプル
  • サンプル
  • サンプル
  • サンプル

 

背景色をつけたい場合、CSSで下記のように設定します。

 

CSS

ul li {

background: #ccc;

}

 

こうすることで背景色がつきました。

 

図2

  • サンプル1
  • サンプル2
  • サンプル3
  • サンプル4

 

見やすくするために背景色を交互に設定するのは少し工夫する必要があります。

しかし、「:nth-child」を使えばCSSに数行の記述をするだけで実装可能です。

 

CSS

ul li {

background: #ccc;

}

ul li:nth-child(even) {

background: #aaa;

}

 

こうすることで交互に異なる背景色がつきました。

 

  • サンプル1
  • サンプル2
  • サンプル3
  • サンプル4

 

後からどんなにリストを追加しても大丈夫!

 

HTML

<ul>

<li>サンプル1</li>

<li>サンプル2</li>

<li>サンプル3</li>

<li>サンプル4</li>

<li>サンプル5</li>

<li>サンプル6</li>

<li>サンプル7</li>

<li>サンプル8</li>

</ul>

表層

  • サンプル1
  • サンプル2
  • サンプル3
  • サンプル4
  • サンプル5
  • サンプル6
  • サンプル7
  • サンプル8

 

:nth-child(even)は偶数の要素の時にだけ適用されるという意味です。
ちなみに、:nth-child(add)と記述すると奇数の時、:nth-child(n)と記述するとn番目の時にだけ適用されたり、他にも様々な記述方法があります。

 

ぜひ活用してオシャレなデザインを目指しましょう!

 

OWLet DEMOサイト利用状況

今、利用中のDEMOサイト数

site/
analyzer

OWLet イベントTOPIX

OWLetに関する旬のイベント情報をお届け!

EXPOバナーよくある御質問OWLetの改修要望募集WordPressの脆弱性≪ 既存サイトを撃退するひっくり返し営業法 ≫OWLetイベント情報はコチラ

【注目】OWLet動画

OWLet おもしろコンテンツ

OWLet無料相談センター

今なら無料で専門家がアドバイスします
OWLetでお悩みのことがあれば、OWLet
無料相談センターにご相談してみませんか?

今すぐ相談する

0120-307-555
受付時間 09:30~17:00 (月~金)

参考になった記事のランキング

【新着】OWLet製WEBサイト実績

OWLet製WEBサイト実績一覧へ>