セレクタの種類

シンプルセレクタ

セレクタの最小単位のことをシンプルセレクタといいます。
シンプルセレクタには下記のようなものがあります。

1. タイプセレクタ
2. ユニバーサルセレクタ
3. クラスセレクタ
4. IDセレクタ
5. 属性セレクタ
6. 疑似クラス

属性セレクタや疑似クラスは他と比べると少し難しく感じるので、まずは1～4を確実に使えるようにするのがいいでしょう。

タイプセレクタ

要素名を使ったセレクタをタイプセレクタといいます。
使用した要素がスタイルの適用対象になります。

下記の例ではp要素が適用対象です。

p {color: red;}

ユニバーサルセレクタ

「*」はユニバーサルセレクタをあらわし、すべての要素を適用対象にします。

ユニバーサルセレクタは下記のように使用します。

* {color: red:}

クラスセレクタ

class属性の値の先頭に「.(ピリオド)」を付けて指定するセレクタをクラスセレクタといいます。

<p class="sample1 sample2">最初の段落</p>
<p class="sample1">2番目の段落</p>

このようにclass属性は複数の値を設定できますが、値のうちの1つを指定すれば適用対象となります。
そのため、このHTMLの場合は下記のようにクラスセレクタで .sample1 を指定すれば、両方のp要素にスタイルを適用させることができます。

.sample1 {color: red;}

IDセレクタ

id属性の値の先頭に「#」を付けて指定するセレクタをIDセレクタといいます。

ID属性は下記のように使用します。

#sample {color: red;}

属性セレクタ

属性セレクタは属性を使って適用対象を指定するセレクタです。
特定の属性を使用していたり、特定の属性に特定の値を指定している属性を適用対象にすることができます。

属性セレクタに関しては別の記事でまとめます。

疑似クラス

疑似クラスは要素が特定の状態の時に適用対象にすることができます。
リンクに関連するものや最初の子要素など、他のシンプルセレクタとはかなり異なる印象があります。

疑似クラスに関しては別記事でまとめます。

セレクタの組み合わせルール

セレクタの先頭はタイプセレクタ、またはユニバーサルセレクタのどちらかにする必要があります。

例えばタイプセレクタ＋クラスセレクタだと下記のようになります。

p.sample{color: red;}

この例では、class属性にsampleが指定されている全てのp要素が適用対象になります。

また、ユニバーサルセレクタ＋クラスセレクタだと下記のようになります。

*.sample{color: red;}

この例では、class属性にsampleが指定されている全ての要素が適用対象になります。

ただし、ユニバーサルセレクタの後に他のシンプルセレクタが続く場合は、ユニバーサルセレクタを省略できます。
そのため、下記のように省略して書くことが多いです。

.sample{color: red;}

セレクタのまとめ

今回はセレクタについてまとめました。
属性セレクタと疑似クラスについては別の記事でまとめようと思います。

みいと

Contact

興味を持ったものをいろいろと勉強しています。