cssのセレクタとは?詳しい説明と、代表的な6種類を紹介

こんにちは、tanaka です。

cssのセレクタは、ある程度知っているけど
+ とか
> とかが
なんとなくわかるけど、
はっきり分からない。

そんな、
方へ向けて
 ・cssセレクタの説明
 ・よく使われそうなセレクタの紹介
をします。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

cssのセレクタ前説

セレクタとは html の要素指定

セレクタとは css に記述する、
html の要素指定のことです。

こういうとややこしく聞こえるかもしれませんが、下の画像のことです。

セレクタ画像19

これら css の
{ } の前の部分を
セレクタといいます。

何のためにセレクタを書くのか? ですが、
まず、
htmlとcssの役目は、
  html = 文字や画像を入れる
  css  = htmlに対して色付けや配置をする
と別れています。

とするとcssは、
html に働きかけて機能するものなので
css → html へ指示を出す事になります。

なのでcssは、html に向かって

  • css「html のどこの色を変えますか?」
  • css「html のどこを移動させますか?」

と、
「どこですか?」
を聞く事になります。

その、
css「html のどこですか?」
の指示がセレクタになります。

さらに、
セレクタは、

htmlcss

のような
1対1の関係だけでなく、
一度に複数などの指定をすることもできます。

h1,h2,h3一度に複数
div + label h1divを基本として 離れた所
div > h1条件をつけて

など、指定する事ができます。

そしてセレクタは、
一度に、
1つずつだけでなく
2つ以上複合して使う事もできます。

下の画像は3複合使用です。

セレクタ画像22

そして、
セレクタの間に記号を持たせる事によって
複雑な指定をすることもできます。

セレクタ記号セレクタ記号セレクタ
.box01+label
h1





box01隣接<label>子孫<h1>

上の複合セレクタを説明すると、

.box01 に隣接した <label> の子要素全て <h1>
{ 文字色=青色 }

と、なります。

これらの
記号を使う事によって
 ・cssを短く
 ・cssを見やすく
できます。

cssのセレクタ説明

子要素から親要素へ逆戻りするセレクタは存在しない

そして、
主に使われそうなセレクタの記号は、以下の表の通りです。

注)2020年7月7日現在:子要素から親要素へ逆戻りするセレクタはありません。

記号名記号    説明  使用例  補足
■複数系■



複数,複数h1,h2,h3 { }h1,h2,h3指定





■子孫系■



子孫
指定された子要素内
全て
.box01 h1 { }.box01以下にある h1全て
親子>1階層下のみ
(複数あるなら全て)
.box01 > h1 { }.box01の1階層下 h1を全て指定





■隣接系■



隣接1つ+隣接する1つだけの
セレクタ
.box01 + label + h1 { }h1のみ
隣接全て~隣接する
全てのセレクタ
.box01 ~ label { }.box01と隣接の labelを全て指定

cssのセレクタ具体例

複数、子孫、隣接セレクタは覚えておきたい

セレクタは、まだあるのですが
確実に覚えておいた方が良いのは3つ

  • 複数( , )
  • 子孫(   )←空白
  • 隣接( + )

この3つ、さえ覚えていれば
とりあえず困ることは無いでしょう。

それでは、上の表の順番に説明していきます。

1:複数セレクタ( , )

名前の通り、複数を一度に指定するセレクタです。

以下のように使います。

セレクタ画像1

h1,h2,h3 全てまとめて文字を赤色にしています。

セレクタ画像2

まとめて指定した結果

セレクタ画像3

全て赤色になりました

初期設定で、よく使われます。
複数セレクタは覚えておきたい所です。

2:子孫セレクタ( )←空白

子要素に含まれているセレクタの指定です。

例えば、
下のような階層構造になっている html があったとします。

セレクタ画像5

ここで
<div class=”test01″>を基準に、h1 h2 を指定してみます。

セレクタ画像4
セレクタ画像6
.test01ollih1

子要素の順番にたどっていき指定しています。
これは、
比較的分かりやすいと思います。

次のh2指定、

.test01h2

かなり間を全て飛ばしています。

この指定は、
「.test01 以下の子要素にある全ての h2 を指定」
の意味になります。

今回は h2 が1つしかありません。

なので、
h2 の文字だけ青色になりましたが、

.test01 の下に、
他の h2 があれば
それらも、青色になります。

なので、
指定するときは注意しましょう。

どうしても、
「ややこしい!」
という場合は、

.test01ollih2

と、間を飛ばさずに
順番に指定するのもありでしょう。

3:親子セレクタ( > )

1階層下のみ指定するセレクタです。
ずっと下の子孫要素までは影響しません。
(ただし、1階層下で条件に当てはまれば、全て指定される)

h2 の文字色だけ赤くします。

セレクタ画像11
セレクタ画像10
セレクタ画像12

.test01 の 1階層した h2 を指定したので
bbbbb が赤色に変わりました。

ここで注意点が一つ。
1階層下に h2 が2つあった場合、

どちらの h2 も文字色が赤になるので気をつけてください。

4:隣接1つセレクタ( + )

同じ階層の1つだけを指定するセレクタです。

divが同じ階層に並んでいます。(隣接)
この一番下 <h1> を指定する、とします。

セレクタ画像8

順番に+でつないでいきます

セレクタ画像7

<h1>の文字だけ赤くなりました。

セレクタ画像9

隣接1つセレクタは、必ず間を飛ばしたりせず
全て+でつなぐ必要があります。

5:隣接全てセレクタ( ~ )

隣接する全てのセレクタを指定します。

なんだかよくわからなく聞こえるので、
とりあえず、下のhtmlをみてください。

セレクタ画像14

上から

<div class=”test01″>

<h1>
<h2>
<h3>

<h1>
<h2>
<h3>

と、隣接しています。

ここで、<h2> の色を変えてみましょう。

セレクタ画像13
セレクタ画像15

1つの指定なのに2か所、赤くなりました。

これは、
隣接する全ての <h2> が指定されたためです。

さらに、
隣接する <h2> がいくつもあれば
それらも赤色に変わります。

以上、
代表的なセレクタを紹介しました。
これらを覚えれば、
セレクタで困ることはないでしょう。

class名でも指定できる

セレクタは、
クラス名、id名も利用する事ができます。

例えば、下のように全てにクラス名がついていたとします。

セレクタ画像17

このように、 記号で全てクラス名でつないでいくことも可能です。

セレクタ画像16

ここでは、最終的に<h3 class=”test03″>が指定されています。

セレクタ画像18

なので、cccccが赤色になりました。

これで、セレクタについての説明はおしまいです。

なんだかよくわからないな、という方は、

  • 複数( , )
  • 子孫( )←空白
  • 隣接( + )

この3つを確実に覚えてください。

これさえ覚えれば、
簡単なcss作りならば困ることはない
と思います。

最後に、
注)2020年7月7日現在:子要素から親要素へ逆戻りするセレクタはありません。
あればよかったのですが。

以上、
cssのセレクタについてのお話しでした。

ありがとうございました。

タイトルとURLをコピーしました