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番目の時にだけ適用されたり、他にも様々な記述方法があります。
ぜひ活用してオシャレなデザインを目指しましょう!