CSSセレクタの意味&指定方法

CSSセレクタの意味&指定方法について。

CSSの書き方

CSSは、以下の3つで構成されます。

  • セレクタ…CSSを適用させるタグを指定する。
  • プロパティ…適用させるスタイルの種類を指定する。
  • 値…指定するプロパティの内容を指定する。

この3つをそれぞれを記述することで命令文が成立します。

図の例にあるCSSの場合
図の場合はaタグ(セレクタ)の文字の色(プロパティ)を(値)にする」という命令文になります。

以下からセレクタ の説明に入ります。

要素型セレクタ

要素名で指定したセレクタ。
ページ内にある指定した全ての要素に適用されます。

補足
要素については「HTMLの構造について」をご参照ください。

HTMLでの記述

<p>pタグです。</p>
<a>aタグです。</a>

CSSでの記述

p {
color: red;
}

ブラウザでの表示

pタグです。
aタグです。

全称セレクタ

全ての要素を指定したセレクタ。
「*(アスタリスク)」を使うことでページ内にある全ての要素に適用されます。

HTMLでの記述

<p>pタグです。</p>
<a>aタグです。</a>

CSSでの記述

* {
color: red;
}

ブラウザでの表示

pタグです。
aタグです。

classセレクタ

クラス名を指定したセレクタ。
「.(ドット)CLASS名」を使うことでページ内にある指定のクラスの要素に適用されます。
また、要素とクラス名を組み合わせることで、クラス名がついた要素を装飾することができます。

HTMLでの記述

<p>pタグです。<span class=”example-class”>spanタグです。</span></p>
<a class=”example-class”>aタグです。</a>
<p class=”example-class-tag”>pタグです。</p>

CSSでの記述

.example-class {
color: red;
}
.example-class-tag {
color: blue;
}

ブラウザでの表示

pタグです。spanタグです。
aタグです。
pタグです。

idセレクタ

ID名の要素を指定したセレクタ。
「#(シャープ)ID名」を使うことでページ内にある指定のIDの要素に適用されます。
また、(classセレクタと同じく)要素とID名を組み合わせることで、ID名がついた要素を装飾することができます。

HTMLでの記述

<p>pタグです。</p>
<a id=”example-id”>aタグです。</a>

CSSでの記述

#example-id {
color: red;
}

ブラウザでの表示

pタグです。
aタグです。

classとIDの違い

class名は1ページ内で同じクラス名を何度も使えますが、ID名は1ページ内で1回しか使うことができません。同じページ内で1回使ったID名は、2回以上は使うことが出来ません(指定してもエラーになるわけではないが、誤った記述)。
CSSに限った話ではありませんが、IDには識別する役割があります。
例えば、1つのWordPressサイトでも同じログインIDを作ることができないのと同じです。

子孫セレクタ

親子関係で指定したセレクタ。
セレクタの次に半角スペース名を入れ、その後にセレクタを指定することで親要素(最初のセレクタ)内の全ての子要素(半角開けた後のセレクタ)に適用されます。
要素型セレクタやクラスセレクタなどで使えます。

補足
親子関係については「HTMLの構造について」の項目「親子要素について」をご参考になさってください。

HTMLでの記述

<div class=”example-progeny”>
<p>pタグです。<span>spanタグです。</span></p>
<a>aタグです。</a>
</div>

CSSでの記述

p span {
color: red;
}
.example-progeny a {
color: blue;
}

ブラウザでの表示

pタグです。spanタグです。
aタグです。

子セレクタ

親子関係で指定したセレクタ。
セレクタの次に「>」を入れ、その後にセレクタを指定することで親要素(最初のセレクタ)内の一階層下の子要素(半角開けた後のセレクタ)に適用されます。
要素型セレクタやクラスセレクタなどで使えます。

HTMLでの記述

<div class=”example-child”>
<p>pタグです。<span>spanタグです。</span></p>
<span>spanタグです。</span>
</div>

CSSでの記述

.example-child > span {
color: red;
}

ブラウザでの表示

pタグです。spanタグです。
spanタグです。

子孫セレクタと子セレクタの違い

子孫セレクタの場合は、親要素の中の子要素、孫要素全てに適用されます。
一方子セレクタは親要素の中の一階層下の子要素のみにしか適用されません

子セレクタ項目内でのHTML・CSSでの記述とブラウザでの表示を例に
子セレクタ項目内の上記の「HTMLでの記述・CSSでの記述・ブラウザでの表示」を例に具体的な違いを書いてみました。

  • 子セレクタでの記述の場合
    上記記述の通り、テキスト色が赤となったのはclass名「example-child」の直下にある「spanタグです。」のみとなります。
  • 子孫セレクタでの記述の場合
    上記記述が子孫セレクタだった場合(CSSでの記述で「>」を書かない場合)、テキスト色が赤となる箇所はclass名「example-child」の下にある全ての「spanタグです。」となります。
    以下に具体的な例を書いてみましたのでご参考になさってください。

HTMLでの記述

<div class=”example-child”>
<p>pタグです。<span>spanタグです。</span></p>
<span>spanタグです。</span>
</div>

CSSでの記述

.example-child span {
color: red;
}

ブラウザでの表示

pタグです。spanタグです。
spanタグです。

隣接セレクタ

兄弟関係で指定したセレクタ。
セレクタの次に「+(プラス)」を入れ、その後にセレクタを指定することで左のセレクタが隣り合った右のセレクタに適用されます。
要素型セレクタやクラスセレクタなどで使えます。

補足
兄弟関係については「HTMLの構造について」の項目「兄弟要素について」をご参考になさってください。

HTMLでの記述

<p>pタグです。<a>aタグです。</a></p>
<a>aタグです。</a>
<a>aタグです。</a>

CSSでの記述

p + a {
color: red;
}

ブラウザでの表示

pタグです。aタグです。
aタグです。
aタグです。

間接セレクタ

兄弟関係で指定したセレクタ。
セレクタの次に「~」を入れ、その後にセレクタを指定することで左のセレクタと同じ階層にある右のセレクタに適用されます。
要素型セレクタやクラスセレクタなどで使えます。

HTMLでの記述

<p>pタグです。<a>aタグです。</a></p>
<a>aタグです。</a>
<a>aタグです。</a>

CSSでの記述

p ~ a {
color: red;
}

ブラウザでの表示

pタグです。aタグです。
aタグです。
aタグです。

隣接セレクタと間接セレクタの違い

隣接セレクタの場合は、「+」より左側に指定したセレクタの直後の、「+」の右側に指定したセレクタのみ適用対象とされます
p + a と書かれている場合は pタグの直後に隣接しているaタグのみ適用されます。

一方間接セレクタは「~」より左側に指定したセレクタの後の、「~」の右側に指定したセレクタが適用対象とされます
p ~ a と書かれている場合は pタグの後に並列しているすべてのaタグで適用されます。

複数のセレクタ

複数の指定ができるセレクタ。
セレクタの次に「,(カンマ)h」を入れ、その後にセレクタを指定することで複数の要素に同じ装飾を適用されます。
要素型セレクタやクラスセレクタなどで使えます。

HTMLでの記述

<p>pタグです。<span>spanタグです。</span></p>
<a>aタグです。</a>

CSSでの記述

p , a {
color: red;
}

ブラウザでの表示

pタグです。spanタグです。
aタグです。

要復習