2018.06.28

【CSS】要素を特定する疑似クラスを使ってみよう

目次

今回は少し応用的な内容ですが、順を追って理解していけばそこまで難しくはないはずなので、大事な要点にしぼって説明していきたいと思います。

疑似クラスとは

疑似クラスは「a:hover」のようにコロン(:)を付けて使いますが、よく使う疑似クラスには、:hover(ホバーしたときのCSSを指定)や:active(クリックしたときのCSSを指定)などがあります。

疑似クラスには他にもさまざまなものがありますが、今回は要素を特定するときに便利な疑似クラスについて解説していきます。

要素を特定する疑似クラス

一番目の子要素を特定する :first-child

上の例で、一番上のpだけにスタイルを適用したかったとします。この場合に使うのは:first-childで、下のように書きます。

これで、.containerの子要素で、一番目にあるものにスタイルが当たるようになりました。

注意が必要なのは、この場合にa:first-childとするとスタイルが適用されない点です。:first-childはあくまで一番上の子要素を指定するものなので、この場合は一番上にあるのはpなので、aとするとスタイルが当たらないことになります。そのため、:first-childの前の「p」は、分かりやすいように補足的に書いておく、といったイメージでOKでしょう。

n番目の子要素を特定する :nth-child()

上の例で、2番目の子要素であるaを特定するには:nth-child()を使います。()の中は2番目なので「2」を入れればOKです。aタグなので、補足的にコロン(:)の前に「a」を入れておきます。



最後の子要素を特定する :last-child

上の例で、一番下にあるpを特定するには:last-childを使います。考え方は:first-childや:nth-child()などと同じで、コロンの前には「p」を入れておきます。



同じ種類のもののうち、n番目にあるものを特定する :nth-of-type()

上の例で、真ん中のpを特定するにはp:nth-child(3)としてもOKですが、:nth-of-type()を使うこともできます。この場合は、p:nth-of-type(2)とすれば真ん中のpが特定できます。


このように、p:nth-of-type()は、「いくつかあるpの中でn番目のp」という意味になります。この場合は()の中を「2」としたので、上から2番目のpにスタイルが適用されました。

奇数番目、偶数番目を特定する odd・even

:nth-child()や:nth-of-type()の応用的な使い方として、()の中に「odd」を入れると奇数番目、「even」を入れると偶数番目の要素を特定できます。



ちなみにoddとevenの覚え方は、「odd=3文字=奇数、even=4文字=偶数」とすると覚えやすいかと思います。

()の中を「3n」「3n+1」などで指定する

:nth-child()や:nth-of-type()では、()の中に「3n」や「3n+1」などと指定することもできます。この場合、nには0から順に数字が入っていくため、「3n」だと3,6,9,12・・・番目、「3n+1」だと1,4,7,10・・・番目の要素を特定できることになります。

それ以外の要素を特定する :not()

上の例で、一番上のpを除くすべてのpを特定したいときは、:not()を使い、()の中に:first-childを入れればOKです。:not()は「それ以外の」「~じゃない」といった意味を持っています。


:not()の()の中には、:last-childはもちろん、:nth-child()や:nth-of-type()なども入れることができます。ただし、注意が必要な点としては、()の中の:first-childなどの前にpやaなどのタグ名は書かないようにしましょう。

また、()の中にはclassやidを入れることもでき、その場合は:not(.except)、:not(#except)などとします。

:nth-child()と:nth-of-type()の違い

:nth-child()はpやaなどのタグの種類を関係なしに上から何番目かを指定する一方で、:nth-of-type()はコロンの前に付けたタグと同じものの中から何番目かを指定するという違いがあります。

慣れるまではややこしく感じるかもしれませんが、これらの疑似クラスを覚えておくと、無駄なclassやidを使わずにコードがスッキリ書けることがあるので、ぜひ覚えておきたいところです。

home

scroll