セレクタとは｜HTML＆CSSの基本用語

セレクタとは

簡単にセレクタを説明すると、

• 要素型セレクタ（a）
• IDセレクタ（#sample）
• クラスセレクタ（.class）
• 属性セレクタ（[id=”class”]）
• 全称セレクタ（*）

これらの全てがセレクタです。

ただし、セレクタは上記だけではなく、まだまだ沢山あります。

ここでは、基本的な５つのセレクタについて解説しています。

セレクタの使用例

セレクタの使用例（CSS）を紹介します。

基本的には、以下の画像のような配置になります。

要素型セレクタ（a）の場合は、

a {
    font-size: 20px;
}

この内の《a》にあたる箇所がセレクタになります。

IDセレクタ（#sample）の場合は、

#sample {
    font-size: 20px;
}

この内の《#sample》にあたる箇所がセレクタになります。

属性セレクタ（[id=”class”]）の場合は、

id[class] {
    font-size: 20px;
}

この内の《[id=”class”]》にあたる箇所がセレクタになります。

全称セレクタ（*）の場合は、

* {
    font-size: 20px;
}

この内の《*》にあたる箇所がセレクタになります。

要素型セレクタ

例えば、以下の要素型セレクタの場合は、

a {
    font-size: 20px;
}

この内の《a》にあたる箇所が要素型セレクタになります。

この意味としては、《a》というセレクタ全てに以下のプロパティと値を適用するという意味になります。《a》はリンクを表すので、リンクの全てに《font-size: 20px;》が適用されます。

要素型セレクタとして《body》が定められているのであれば、《body》内の全ての範囲に《font-size: 20px;》が適用されます。

IDセレクタ

例えば、以下のIDセレクタの場合は、

#sample {
    font-size: 20px;
}

この内の《#sample》にあたる箇所がIDセレクタになります。

この意味としては、《#sample》というセレクタに以下のプロパティと値を適用するという意味になります。《#sample》はID名を表すので、このID名に囲まれた範囲に《font-size: 20px;》が適用されます。

クラスセレクタ

例えば、以下のクラスセレクタの場合は、

.sample {
    font-size: 20px;
}

この内の《.sample》にあたる箇所がクラスセレクタになります。

この意味としては、《.sample》というセレクタに以下のプロパティと値を適用するという意味になります。《#sample》はクラス名を表すので、このクラス名に囲まれた範囲に《font-size: 20px;》が適用されます。

属性セレクタ

例えば、以下の属性セレクタの場合は、

id[class] {
    font-size: 20px;
}

この内の《id[class]》にあたる箇所が属性セレクタになります。

この意味としては、《id[class]》というセレクタに以下のプロパティと値を適用するという意味になります。これは、クラス属性のあるIDタグに《font-size: 20px;》が適用されます。

全称セレクタ

例えば、以下の全称セレクタの場合は、

* {
    font-size: 20px;
}

この内の《*》にあたる箇所が全称セレクタになります。

この意味としては、《*》というセレクタに以下のプロパティと値を適用するという意味になります。これは、全ての要素に《font-size: 20px;》が適用されます。

セレクタのクイズにチャレンジ！

セレクタの基本構造を知るために

セレクタの基本構造はプロパティと値によって成り立ちます。

よりシンプルにセレクタの役割を例えるのであれば、セレクタは中身を覆った箱のような役割を持っており、その中身を分かりやすく一つにまとめたものです。

各種セレクタを上手く使いこなすことができればソースコードをシンプルにまとめることも可能になるでしょう。

セレクタの書き方｜子孫・複数・隣接・間接・直下

セレクタの種類基本的なセレクタは以下の５つです。要素型セレクタ（a）IDセレクタ（#sample）クラスセレクタ（.class）属性セレクタ（）全称セレクタ（*）これらのセレクタは全体を指定する場合に利用されていま...

zeroga.com

2022.04.12