仕事

超初心者向け！最低限押さえておきたいCSSセレクタ

おみそ

2019年09月18日

仕事でCSSセレクタを使う機会はたくさんあるのに、ついつい書き方を忘れてしまうことがあります。種類もたくさんあり、覚えれば覚えるほど便利なCSSセレクタのなかから、超初心者向けに最低限押さえておきたいCSSセレクタを厳選いたしました！

CSSセレクタって何？

CSSセレクタとは、スタイルを適用する際に"どのスタイルに適用させるか"対象を指定することです。（タグ名やclass、idなど）
また、CSSセレクタをご紹介するにあたって、"要素"という言葉が出てきます。要素とはタグで囲まれた全体を指します。

例） <p>この一文全てが要素となります。</p>

全ての要素に対してスタイルを適用させたいときは「＊」を使います。

アスタリスクで全ての要素に適用

中央に書いてあるCSSは、全ての要素に適用させる書き方です。
一番下に書いてあるCSSはp要素の中にある全ての要素に適用させる書き方です。

セレクタを「>」で区切ると、一つ下の階層の子要素にのみスタイルを適用させることができます。

大なりで子要素のみに適用

このように.sampleの子要素のpタグのみにスタイルが適用されます。

セレクタを「＋」で区切ると、隣接している要素にスタイルを適用させることができます。

プラスで隣接している要素に適用

最初の要素にのみ、スタイルを適用させることができます。

:first-childで最初の要素にだけ適用

初心者がやりがちなミスは、「li」と「:first-child」の間に半角スペースを入れてしまうこと。半角スペースをいれてしまうと、何に対してスタイルを適用するのか指示が成されていないため、スタイルが適用されません。

仮に要素の3番目にだけスタイルを適用させたいとき、:nth-of-type(n)の「(n)」に3を入れると適用されます。

:nth-of-type(n)でn番目の要素に適用

また、「(n)」の部分には他にも以下のように指定することもできます。

「:nth-of-type(n)」を使用する際、間違いやすいのが「:nth-child(n)」です。
「:nth-child(n)」はn番目の要素に適用させたいときに使用します。

最後の要素にのみ、スタイルを適用させることができます。

:last-childで最後の要素に適用

今回は6種類のCSSセレクタをご紹介いたしました。ほんの一部に過ぎませんが、使う機会はたくさんありますので最低限おさえておきましょう。同じようなCSSセレクタについて紹介されている記事はたくさんありますので、お時間のあるときに見てみてください。