selectors

CSSのセレクタは、どのHTML要素にスタイルを適用するかを選ぶ指定です。要素・クラス・IDや、要素同士の関係による選び方を説明します。

Cascading Style Sheets selectors.

CSSセレクターの基本と指定方法

　CSSは HTMLに記述された指定の範囲または要素に対して装飾を施します。そして、CSSによるデザインをどの HTML要素に適用させるかを指定するのに用いられるのが「セレクタ」です。セレクタには幅広い種類があり、様々な指定方法がありますので、状況に応じてスタイルを柔軟に指定できるようになっています。セレクタの指定方法を複数知っていることは、CSS設計をするうえで非常に大切なことです。

Universal selector 「全称セレクタ」

* {color:red;}

すべての種類の要素を選択します。

Type selector 「要素型セレクタ」

p {color:red;}

指定された要素名を持つすべての要素を選択します。

Class selectors 「クラスセレクタ」

p.sample {color:red;}

指定されたクラス名をつけた要素を選択します。

ID selectors 「idセレクタ」

p#sample {color:red;}

指定された ID名をつけた要素を選択します。

複数のセレクタ

h1, h2 {color:red;}

複数のセレクタ

子孫セレクタ

p strong {color:red;}

下の階層の子孫要素

子セレクタ

p > strong {color:red;}

直下の階層の子要素

隣接セレクタ

h1 + p {color:red;}

直後に隣接している要素

直下にある同じ階層のセレクタ

h1 ~ p {color:red;}

指定の要素の後にある同じ階層の要素

擬似クラス

:link

a:link {color:red;}

未訪問のリンク

:visited

a:visited {color:red;}

訪問済みのリンク

:hover

a:hover {color:red;}

カーソルが乗っている要素

:active

a:active {color:red;}

クリック中の要素

:focus

input:focus {background:red;}

フォーカスされている要素

:lang

p:lang(en) {color:red;}

特定の言語を指定した要素

:first-child

p:first-child {color:red;}

要素内の最初の子要素

擬似要素

:first-line

p:first-line {color:red;}

要素の最初の一行

:first-letter

p:first-letter {color:red;}

要素の最初の一文字

:before

blockquote:before {content:"『";}

要素の直前

:after

blockquote:after {content:"』";}

要素の直後

属性セレクタ

要素名[属性名]

a[target] {color:red}

特定の属性を持つ指定要素

要素名[属性名="属性値"]

a[target="_blank"] {color:red}

特定の属性値を持つ指定要素

要素名[属性名-="属性値"]

p[class="sample"] {color:red}

属性地候補と一致した要素

　CSS3より擬似要素に付けるコロン（ : ）が２つになって、疑似クラスとの違いが分かりやすくなっています。ただし、コロン２つの記述方法は、IE8以前ではサポートされていないので、これらの旧いブラウザを考慮するなら、疑似要素についてもコロンを１つにしておいたほうが良さそうです。

擬似クラス・擬似要素とは

　疑似クラス（pseudo-classes）とは、 要素や属性などの文書構造だけでは特定できない “ある状況にある要素”を対象としてスタイルを適用するセレクタのことです。 例えば、最初の子要素やユーザーが操作中の要素などを対象にスタイルを適用することが可能になります。 ユーザー操作による状況変化に対してスタイルを適用できるため、ウェブページに動的な効果を与えることが出来ます。

　一方、擬似要素（pseudo-element）とは、要素や属性などの文書構造だけでは特定できない “要素の一部”を対象としてスタイルを適用するセレクタのことです。 例えば、要素の一行目や一文字目にスタイルを指定したり、 要素の前後にテキストや画像などを挿入することが出来ます。

　擬似クラスと擬似要素の違いが分かりにくいですが、疑似クラスは要素全体が対象になるのに対して、 疑似要素は要素の一部分だけが対象になる点が異なります。

Universal Selector 「全称セレクタ」

　「 * （アスタリスク）」と記述することで、すべての要素に装飾が適用されます。任意で、特定の名前空間に限定したり、すべての名前空間を対象にしたりすることができます。

* {
	color: red;
}

<p>p要素の内容</p>
<span>span要素の内容</span>

　要素名に関係なくすべての要素に装飾が適用されます。

　アスタリスクは単純セレクターを伴う場合に省略可能です。たとえば、*.warning と .warning は同じ意味の指定になります。

Type selector 「要素型セレクタ」

　HTMLの要素名を指定することで、装飾を施す範囲を指定します。

p {
	color: red;
}

　このように指定することで、すべての p要素に装飾を適用します。

<p>p要素の内容</p>
<span>span要素の内容</span>
<p>２つ目の p要素の内容</p>

　上記のように HTMLと CSSの記述をしたとき、セレクタで指定してある p要素には装飾が適用されますが、span要素には適用されません。

Class selectors 「クラスセレクタ」

　「.（ドット）クラス名」と記述することで、指定のクラスに装飾が適用されます。

.example {
	color: red;
}

　なお、この書き方は、下記の属性セレクタと同じ意味なります。

[class~=example] {
	color: red;
}

<p>p要素の内容</p>
<p class="example">クラス名 example の p要素の内容</p>
<span>span要素の内容</span><br>
<span class="example">クラス名 example の span要素の内容</span>

　クラス名を指定するとそのクラス名が付加されている要素すべてに装飾が適用されます。

　要素に続けてクラス名を指定することで、そのクラス名が付加された要素に装飾が適用されます。

p.example {
	color: red;
}

　example クラスが付加されている p要素にのみ、装飾が適用されます。

　また、２種類の装飾を準備し、半角スペースで区切ることで１つの要素に両方を適用するといったこともできます。

.red {
	color: red;
}

.green-bg {
	background: green;
}

<p>p要素の内容</p>
<p class="red">クラス名 red の p要素の内容</p>
<p class="red green-bg">クラス名 red と green-bg の p要素の内容</p>

ID selectors 「idセレクタ」

　「 #（シャープ）ID名」と記述することで、指定の ID に装飾が適用されます。

<p>p要素の内容</p>
<p id="example">ID名 example の p要素の内容</p>
<span>span要素の内容</span><br>
<span id="example2">ID名 example2 の span要素内容</span>

p#example {
	color: red;
}

　クラス名の指定と同じく、要素に続けて指定することで、その ID 名が付加された要素に装飾が適用されます。

A , B（複数のセレクタの指定）

　セレクタの次に「 ,（カンマ）」を入れセレクタを指定することで、複数の要素に同じ装飾が適用されます。

<div>div要素の内容</div>
<p>p要素の内容</p>
<span>span要素の内容</span>

　div要素と span要素に同じ装飾をしたい場合に、

div {
	color: red;
}

span {
	color: red;
}

と、書いても構いませんが「 ,（カンマ）」を使うことで凝縮して書くことができます。

div , span {
	color: red;
}

　どちらも div要素と span要素に装飾が適用されます。

A B（子孫セレクタの指定）

　セレクタの次に半角スペースを入れセレクタを指定することで、指定の親要素内のすべての子要素に装飾が適用されます。

<p>p要素の内容</p>
<p><span>p要素の子要素の span要素の内容</span></p>
<span>span要素の内容</span>

p span {
	color: red;
}

　p要素に囲われた span要素にのみ、装飾が適用されます。

　クラス名を指定することも可能です。

<p>p要素の内容</p>
<p><span>p要素の子要素の span要素の内容</span></p>
<p><span class="example">p要素の子要素のクラス名 example の span要素の内容</span></p>
<span>span要素の内容</span>

p span.example {
	color: red;
}

　上記の例の場合は、p要素で囲われていて、かつ example のクラス名が指定されている span要素に装飾が適用されます。

　また、装飾の範囲は孫要素など、階層が深くなってもすべてに適用されます。

<div>div要素の内容</div>
	<div>
		<span>div要素の子要素の span要素の内容</span>
		<div>
			<p><span>div要素の孫要素の span要素の内容</span></p>
		</div>
	</div>
<span>span要素の内容</span>

div span {
	color: red;
}

　div要素で囲われているすべての span要素に装飾が適用されます。

A > B（子セレクタの指定）

　セレクタの次に「 > 」を入れセレクタを指定することで、指定の親要素内の一階層下の子要素に装飾が適用されます。

<div>div要素の内容</div>
	<div>
		<span>div要素の子要素の span要素の内容</span>
		<div>
			<p><span>div要素の孫要素の span要素の内容</span></p>
		</div>
	</div>
<span>spanタグの内容</span>

div > span {
	color: red;
}

　先ほどと同じ HTMLの記述であっても、div要素の一階層下にある span要素にのみ装飾が適用されます。

A + B（隣接セレクタの指定）

　セレクタの次に「 + 」を入れセレクタを指定することで、指定の要素に隣接した要素に装飾が適用されます。

<p>p要素の内容</p>
<div>div要素の内容</div>
<p>div要素に隣接した p要素の内容</p>
<p>p要素に隣接した p要素の内容</p>

div + p {
	color: red;
}

　div要素の直後にある p要素に装飾が適用されます。

A ~ B（要素の後ろにある同じ階層のセレクタの指定）

　セレクタの次に「 ~ 」を入れセレクタを指定することで、指定の要素の後にある同じ階層の要素に装飾が適用されます。

<p>div要素より前にある p要素の内容</p>
<div>div要素の内容</div>
<p>div要素より後にある p要素の内容</p>
<p>div要素より後にある p要素の内容</p>
<div><p>div要素の子要素の p要素の内容</p></div>
<p>div要素より後にある p要素の内容</p>

div ~ p {
	color: red;
}

　div要素の以降にあるすべての p要素に装飾が適用されます。ただし階層が違うと適用されません。