【CSS】初心者必見!セレクタを理解しよう!(基礎編)

セレクタ(Selector: 選ぶ者)は、CSSのスタイルを適用する要素を選択するためのものです。

例えば、HTMLに次のコードがある場合を考えてみましょう。


<h1>
    CSSのセレクタを理解しよう!
</h1>
        

このh1要素の色をCSSで変えたい場合は、h1要素をセレクタに指定します。


h1 {
    color: red;
}
        

これが一番単純なセレクタの使い方になります。

では、次の場合を考えてみましょう。


<p>
    こんにちは
</p>
<p>
    Hello
</p>
        

このうち、英語の「Hello」のみを太字にしたい場合、p要素をセレクタに指定してしまうと、日本語の「こんにちは」にもスタイルが反映されてしまいます。

この様な場合は、p要素のclassもしくはid属性やlang属性を設定し、それをセレクタとして指定することで解決します。


<p>
    こんにちは
</p>
<p class="en">
    Hello
</p>
    

.en {
    font-weight: bold;
}
        

このように、セレクタを利用することで様々な要素のスタイルを自由に設定することができます。

セレクタにはいくつかの書き方があり、それらの特徴を覚えておくことはWebのコーディングには必要不可欠です。

セレクタの種類

セレクタの書き方にはいくつかの方法があり、書き方によってスタイルを適用する要素を細かく選択することができます。

例えば「この要素内にある一番最後の子要素」のように細かく選択することもできます。

次の表に、使用頻度の高いセレクタについて記載します。

セレクタ セレクタの対象
要素セレクタ 要素セレクタと、HTML要素の名前が一致している要素に適用します。
IDセレクタ IDセレクタと、HTML要素のid属性に設定された値が一致している要素に適用します。
同名のid属性は一つのページ上で複数使用することはできません。
Classセレクタ Classセレクタと、HTML要素のclass属性に設定された値が一致しているすべての要素に適用します。
同名のclass属性は一つのページ上で複数使用することができます。
属性セレクタ 属性セレクタと、HTML要素の属性の有無またはその値が一致しているすべての要素に適用します。
同名の属性は一つのページ上で複数使用することができます。
擬似クラスセレクタ 擬似クラス(要素の状態)セレクタと、HTML要素の状態(マウスのカーソルが要素の上に乗っている状態[hover]であるかどうかなど)を判定して、一致するすべての要素に適用します。

要素セレクタについて

HTML要素をセレクタに指定してスタイルを適用します。


<p>
    こんにちは
</p>
<p>
    Hello
</p>
    

上記の例には、二つのp要素があります。

これらp要素にスタイルを反映させるためには、次のようにセレクタを指定します。


p {
    color: blue;
}
    

このようにセレクタに要素名をそのまま指定することで、同じ要素すべてにスタイルが反映されます

リンクを作成するa要素の文字色をすべてのページで統一するような場合によく使用します。

理解度チェック

  • h2要素のセレクタを指定して、文字にスタイルを当ててみましょう。
  • a要素のセレクタを指定して、文字色を青色に変えてみましょう。

IDセレクタについて

IDセレクタを使用してスタイルを適用するには、HTML要素のid属性の値をセレクタに指定します。


<p id="greeting">
    こんにちは
</p>
<p>
    Hello
</p>
    

一つ目のp要素にはid属性にgreetingが指定されています。

このidをセレクタに指定するには次のようにCSSを記述します。


#greeting {
    color: red;
    font-weight: bold;
}
    

IDセレクタの#に気づいた方もいるかもしれませんが、これは必要なものです。
IDセレクタには、id属性名の先頭に#(シャープ)記号を付加する必要があります。

理解度チェック

  • 自由にIDセレクタを指定して、文字にスタイルを当ててみましょう。

Classセレクタについて

Classセレクタを使用するには、HTML要素のclass属性の値をセレクタに指定します。


<p class="text-red">
    こんにちは
</p>
<p>
    Hello
</p>
    

一つ目のp要素のclass属性にはtext-redというクラス名が設定されています。

そして、次のようにCSSを記述します。


.text-red {
    color: red;
}
    

IDセレクタと異なり、今回はセレクタ名の先頭にドット(.)が付加されています。
これはClassセレクタには必要なもので、ドット(.)記号があることにより「Classセレクタを使用する」と宣言しています

理解度チェック

  • text-boldクラスを指定し、文字を太字で表示してみましょう。
  • bg-blackクラスを指定し、背景色は黒色、文字色は白色となるスタイルを適用してみましょう。

属性セレクタについて

HTML要素には多くの属性を設定することができます。


<a href="https://prograbi.com">
    Prograbi
</a>
<a href="https://google.com" target="_blank">
    Google
</p>
    

a要素にはリンク先を設定するためのhref属性や、画面の表示方法を設定できるtarget属性があります。

属性セレクタを使用すれば、特定のリンク先が設定されている要素や、属性の設定の有無などをセレクタに指定することができます。


/* 特定のURLが設定されている a要素 を青色にする */
a[href="https://prograbi.com"] {
    color: blue;
}

/* target属性が設定されているすべての a要素 を太字にする */
a[target] {
    font-weight: bold;
}
    

属性セレクタは角括弧([])で属性を囲みます。

上記の例では、セレクタにa要素かつ属性を設定しているため、要素名[属性]としていますが、[属性]のように属性名だけで指定することもできます。

属性セレクター – CSS: カスケーディングスタイルシート | MDN は、属性セレクタについてのより詳しいドキュメントです。

理解度チェック

  • lang属性があれば文字色を緑色に表示してみましょう。
  • lang属性の値がjaであれば、文字色をオレンジ色に表示してみましょう。

擬似クラスセレクタについて

擬似クラスというのは、ブラウザが要素の状態ごとに擬似的に付けてくれるクラスのことです。

例えば、ある要素の上にマウスカーソルを乗せると、hoverという擬似クラスが付きます。


<button>
    ボタン
</button>
    

ボタン要素にカーソルを乗せた時に、ボタン要素にはhoverという擬似クラスが付きます。
この擬似クラスの付け方について気にすることは何もありません。ブラウザが自動的に付けてくれるからです。


button:hover {
    background-color: black;
    color: white;
}
    

hoverが付加されているときのスタイルを適用するには、コロン(:)を使用し :hover をセレクタの末尾に指定します

理解度チェック

  • img要素の上にカーソルを乗せたら、画像が少し大きくなるように設定してみましょう。

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。