セレクタの種類
基本的なセレクタは以下の５つです。
- 要素型セレクタ（a）
- IDセレクタ（#sample）
- クラスセレクタ（.class）
- 属性セレクタ（[id=”class”]）
- 全称セレクタ（*）
これらのセレクタは全体を指定する場合に利用されています。
詳しくは以下のリンクで解説しています。
しかし、１つのセレクタの中にある特定のセレクタのみにプロパティと値を指定する場合、そのセレクタ以降の複数のセレクタを指定する等、指定の仕方によっては様々な指定方法があります。
子孫・複数・隣接・直下・間接セレクタ
基本的なセレクタの５つを記号で組み合わせることで、ある１つ、または、限られた条件下に当てはまる複数のセレクタを指定して装飾することもできます。
- 子孫セレクタ（ ）※：半角スペースで区切り
- 複数セレクタ（，）
- 隣接セレクタ（+）
- 直下セレクタ（>）
- 間接セレクタ（~）
それぞれのセレクタについて見て行きましょう。
子孫セレクタ
子孫セレクタとは、
- 指定された親要素内の子要素の全てに装飾が適応されること
例えば、
.sample span {
color: red; /* 赤文字 */
}上記の《sample》が親要素。次いで、《span》が子要素です。
各セレクタの間に半角スペースを書き、繋げることで子孫セレクタが反映されます。
例として、以下のように実行すると…
<div class="sample">
<span>赤文字</span>
<div>
<span>赤文字</span>
<div>
<span>赤文字</span>
</div>
</div>
</div>上記のサンプルだと以下のような結果になります。
複数セレクタ
複数セレクタとは、
- 全く同じ装飾を複数のセレクタで共有し合うこと
例えば、
.sample_1, .sample_2, .sample_3 {
color: red;
}上記の《sample_1》と《sample_2》と《sample_3》クラスのそれぞれに同じプロパティと値を反映します。
各セレクタの間にコンマを書き、繋げることで複数セレクタが成り立ちます。
例として、以下のように実行すると…
<div class="sample_1">
<span>赤文字</span>
</div>
<div class="sample_2">
<span>赤文字</span>
</div>
<div class="sample_3">
<span>赤文字</span>
</div>
<div class="sample_etc">
<span>赤文字･･･違った！</span>
</div>上記のサンプルだと以下のような結果になります。
隣接セレクタ
隣接セレクタとは、
- 同じ階層にある要素で指定されたセレクタの次のセレクタに装飾を適応すること
例えば、
.sample + p {
color: red;
}上記の《sample》クラスの次の《p》にプロパティと値を反映します。
各セレクタの間にプラスを書き、繋げることで隣接セレクタが成り立ちます。
例として、以下のように実行すると…
<div class="sample">赤文字･･･違った！次だった！</div>
<p>赤文字</p>
<div class="sample">黒文字</div>
<span>ワタシ《span》だよ</span>上記のサンプルだと以下のような結果になります。
直下セレクタ
直下セレクタとは、
- 各要素の真下にある要素に装飾を適応すること
例えば、
.sample > span {
color: red;
}上記の《sample》クラスの直下にある《span》にプロパティと値を反映します。
各セレクタの間に「>」を書き、繋げることで直下セレクタが成り立ちます。
例として、以下のように実行すると…
<div class="sample">
<span>赤文字</span>
<p>黒文字</p>
</div>上記のサンプルだと以下のような結果になります。
間接セレクタ
間接セレクタとは、
- 指定した要素以降の同じ階層の全ての要素に装飾を適応すること
例えば、
.sample ~ .hello {
color: red;
}上記の《sample》クラス以降にある《hello》クラスの全てにプロパティと値を反映します。
各セレクタの間に「~」を書き、繋げることで間接セレクタが成り立ちます。
例として、以下のように実行すると…
<div class="sample">黒文字</div>
<div class="etc">黒文字</div>
<div class="hello">赤文字</div>
<div class="hello">赤文字</div>
<div class="etc">黒文字</div>上記のサンプルだと以下のような結果になります。
セレクタのクイズ！指定方法を学ぶ！
各種セレクタを使ってみよう！
クラスセレクタやIDセレクタを単体で使用する場合は、そのセレクタ一つに指定したプロパティと値が反映することができます。
しかし、より詳細を設定したい場合（限られた条件下でのプロパティと値の適用）には、隣接セレクタや直下セレクタ、間接セレクタが便利です。記号自体は単純なものなので短時間で覚えることができると思います。
コメント