CSSセレクタとは?シンプルなコーディングに必須のセレクタ8選

CSSの基本文法の1つであるセレクタ。役割と基本的な使い方を覚えるのは簡単ですが、実はセレクタを上手く使いこなせるかどうかが、シンプルなコードとなるか、無駄の多いコードとなるかの命運を分けるのです。

本記事で紹介する8つのセレクタの指定パターンは、シンプルなコーディングに必須の知識です。自分のコードに無駄があると感じている人も、これからセレクタを覚えようとする人も、ぜひ8つのパターンだけでも覚えてみてください。

CSSセレクタとは

CSSセレクタ(または単にセレクタ)とは、CSSのスタイルを適用する対象を示す部分のことです。セレクタについてきちんと理解しておかないと、思った通りのデザインを実現できなかったり、無駄な多いコードになってしまったりする可能性があります。

これだけは覚えたいセレクタ8選

セレクタには様々な種類がありますが、基本的には次の8つのパターンを覚えておくことで、自分でコーディングする場合だけでなく、他サイトのCSSを理解するのにも苦労することはないでしょう。

ユニバーサルセレクタ(全称セレクタ)

ユニバーサルセレクタ、または全称セレクタを用いると、ページ内の全ての要素に{}内のスタイルが適用されます。

【指定方法】

* {・・・}

【使用例】

・CSS

タイプセレクタ

タイプセレクタは特定の要素にスタイルを適用したい場合に使用し、セレクタに要素名を指定します。

【指定方法】

要素名{・・・}

【使用例】

・CSS

クラスセレクタ

クラスセレクタは、特定のclass属性に対してスタイルを適用したい場合に用います。

【指定方法】

.クラス名{・・・}

【使用例】

・HTML

・CSS

IDセレクタ

IDセレクタは、特定のid属性に対してスタイルを適用したい場合に用います。

【指定方法】

#id名{・・・}

【使用例】

・HTML

・CSS

擬似クラス

擬似クラスとは、要素が特定の状態にあるときにスタイルを指定できるセレクタです。「特定の状態」というのは、「要素の上にポインターがある時」などのユーザーの動きに対応したものや、「親要素の中の〇番目の要素」のように、20種類以上の指定が可能です。

【指定方法】

セレクタ:擬似クラス名 {・・・}

【主要な擬似クラス】

:link訪問済みのリンクに対して指定する
:visited訪問済みのリンクに対して指定する
:hoverマウスを当てた状態に対して指定する
:activeマウスをクリックして話すまでの状態に対して指定する

【使用例】

・HTML

・CSS

擬似要素

擬似要素とは、要素の特定の部分に対してスタイルを適用するセレクタです。指定した要素内容の直前(または直後)にコンテンツを追加したり、コンテンツの一部(先頭の一文字など)だけにスタイルを適用させたりすることができます。

【指定方法】

セレクタ::擬似要素名 {・・・}

【主要な擬似要素】

::first-letter要素内容の最初の1文字目にスタイルを適用する
::first-line要素内部の最初の行にスタイルを適用する
::before指定した要素内容の直前にコンテンツを追加する
::after指定した要素内容の直後にコンテンツを追加する

【使用例】

・HTML

・CSS

結合子を用いたセレクタ

スタイルの適用先を細かく絞り込みたい場合は、結合子を用います。

【指定方法】

結合子指定方法スタイルの適用先
半角スペースdiv p {・・・}左側に記述したセレクタに含まれる、右側に記述したセレクタの指定先
>div .example>a {・・・}>の左側に記述したセレクタの子要素である、右側のセレクタの指定先
+h2+p {・・・}+の左側に記述したセレクタの直後にある、+の右側のセレクタの指定先
h3~p {・・・}~の左側に記述したセレクタより後にある、~の右側のセレクタ指定先

【使用例】

・HTML

・CSS

同時に複数の適用先を指定する方法

セレクタとセレクタの間にカンマを入れることで、{}内に記述したスタイルを、同時に複数の指定先に適用することができます。無駄のないコーディングする上で必須の知識です。

【指定方法】

セレクタ, セレクタ, セレクタ {・・・}

【使用例】

まとめ

「セレクタ」という言葉自体は、CSSを学び始めた初期の初期に覚えます。しかしセレクタは奥が深く、なんとなくの理解では無駄の多いコードになってしまう可能性があります。効率的かつ、誰でも読みやすいCSSが書けるようになるためにも、常によりシンプルなセレクタの指定方法を追求しましょう。