セレクタとは、スタイルを適用する対象をWebブラウザに伝えるためのものです。
1
2
3
セレクタ {
プロパティ: プロパティ値;
}
これまでの学習では、以下のpのようにセレクタに要素名を記述し、スタイルの適用対象を指定していましたね。
これは「要素型セレクタ」と呼ばれる書き方です。
1
2
3
p {
color: red;
}
上記のほかにも、セレクタの種類はたくさんあります。
今回は、必ずおさえておきたい基本セレクタとよく使うセレクタについて学びます。
基本的なセレクタをおさえよう
基本セレクタには、主に4つあります。
| 基本セレクタ | 説明 | 例 |
|---|---|---|
| 全称セレクタ | 全ての種類の要素を対象にスタイルを適用させる | * |
| 要素型セレクタ | スタイルを適用する対象を「要素名」で指定する | p |
| idセレクタ | スタイルを適用する対象を「id属性の値」で指定する | #sample |
| classセレクタ | スタイルを適用する対象を「class属性の値」で指定する | .sample |
それでは、1つ1つのセレクタの書き方をみていきましょう。
全称セレクタ
全称セレクタは、「全ての種類の要素」を対象にスタイルを適用させるセレクタです。
セレクタにアスタリスク（*）を指定します。
1
2
3
* {
プロパティ名: プロパティ値;
}
以下のように全称セレクタでスタイルを指定すると、全ての要素が対象になるのでh1でもpでも種類関係なく適用されます。
1
2
3
* {
color: red;
}
See the Pen 全称 by miyajima yuya (@pikawaka) on CodePen.
- 全称セレクタは、セレクタに
*を指定する - 全称セレクタを指定すると、全ての要素を対象にスタイルが適用される
要素型セレクタ
要素型セレクタは、スタイルを適用する対象を「要素名」で指定するセレクタです。
1
2
3
p {
color: red;
}
上記では、HTMLファイルに含まれる全てのp要素を選択して、波括弧内のスタイルが適用されます。
See the Pen 要素型 by miyajima yuya (@pikawaka) on CodePen.
要素型セレクタは、セレクタに「要素名」を指定する
idセレクタ
idセレクタは、スタイルを適用する対象を「id属性の値」で指定するセレクタです。
HTMLの要素にid属性を指定し、CSSのセレクタにHTMLで指定した「id属性の値」を#の後に続けて記述します。
1
<要素名 id="id属性の値"></要素名>
1
2
3
#id属性の値 {
プロパティ名: プロパティ値;
}
上記により、HTMLファイルに含まれるid属性を持つ要素を選択して、波括弧内のスタイルが適用されます。選択される要素のid属性は、CSSのセレクタに指定した「id属性の値」と完全に一致している必要があります。
そのため、以下のスタイルはid="second"を持つHTMLの要素に適用されます。
1
2
3
#second {
color: red;
}
HTMLの要素には、id属性を持つ要素が2つあります。
CSSによってスタイルが適用されるのは、secondのid属性値を持つ要素です。firstのid属性値を持つ要素には、スタイルが適用されません。
See the Pen id by miyajima yuya (@pikawaka) on CodePen.
idセレクタを使うときは、いくつかの注意点があるで確かめてみよう
同じid属性の値を重複して指定できない
idセレクタを使用する際には、1つのHTMLファイル内に同じid属性の値を重複して指定することはできないという点に注意してください。
以下のようにid属性値firstを複数の要素に指定することはできません。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS</h1>
<p id="first">Cascading</p>
<p id="first">Style</p>
<p>Sheets</p>
</body>
</html>
1
2
3
#first {
color: red;
}
上記の表示結果は、以下の通りです。
See the Pen id4 by miyajima yuya (@pikawaka) on CodePen.
id属性値firstを複数の要素に指定した場合、スタイルが適用されて文字を赤くすることができていますが、文法的には誤りです。
他にも同じid属性値を重複指定した場合、JavaScriptという言語で操作するときに失敗する可能性やブラウザに意図しない不具合が危惧されます。スタイルが適用されるからといって、id属性値を重複して使用しないでください。
1つの要素に複数のidを指定できない
idセレクタを使用する際には、1つの要素に複数のidを指定できないという点に注意してください。
次のHTMLのように最初のp要素に対して、firstとsecondのid属性値を指定します。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS</h1>
<p id="first second">Cascading</p>
<p>Style</p>
<p>Sheets</p>
</body>
</html>
1
2
3
4
5
6
7
#first {
color: red; // 文字色を赤にする
}
#second {
background-color: yellow; // 背景色を黄色にする
}
上記の表示結果は、以下の通りです。
See the Pen id3 by miyajima yuya (@pikawaka) on CodePen.
最初のp要素の文字色と背景色に変化はありませんね。このように1つの要素に対して、複数のid属性値を指定しても、スタイルは適用されません。
- idセレクタは、
#の後に「id属性の値」を指定する - セレクタで指定した値と完全に一致する、id属性を持つ要素が選択される
- HTML文書中には、同じid属性の値を重複して指定することができない
- 1つの要素に対して、複数のid属性値を指定することができない
classセレクタ
classセレクタは、スタイルを適用する対象を「class属性の値」で指定するセレクタです。
class属性で指定した値は、一般に「クラス名」と呼ばれます。
HTMLの要素にclass属性を指定し、CSSのセレクタにHTMLで指定したクラス名（class属性の値）を.の後に続けて記述します。
1
<要素名 class="class属性の値"></要素名>
1
2
3
.クラス名 {
プロパティ名: プロパティ値;
}
同じクラス名を重複して指定できる
class属性はid属性とは異なり、1つのHTMLファイル内に同じクラス名（属性値）を重複して指定することができるという特徴があります。
例えば、以下のスタイルはclass="text-red"を持つ全ての要素に適用されます。
1
2
3
.text-red {
color: red;
}
See the Pen クラス by miyajima yuya (@pikawaka) on CodePen.
1つの要素に複数のクラスを指定できる
class属性では、複数のクラス（属性値）を指定することができます。
以下のように半角スペースで区切ります。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>CSS</h1>
<p class="text-red bg-pink">Cascading</p>
<p>Style</p>
<p class="text-red">Sheets</p>
</body>
</html>
See the Pen クラス2 by miyajima yuya (@pikawaka) on CodePen.
要素名に続けてクラス名を指定する
要素名に続けてクラス名を指定した場合は、その要素でのみクラスの指定が適用されます。
1
2
3
要素名.クラス名 {
プロパティ名: プロパティ値;
}
例えば、以下のようにCSSのセレクタにh1.text-redと指定した場合は、HTMLのp要素にtext-redのクラス名を指定してもスタイルは適用されません。
クラス名でスタイルが適用されるのは、h1要素だけです。
1
2
3
h1.text-red {
color: red;
}
See the Pen クラス3 by miyajima yuya (@pikawaka) on CodePen.
特定の要素のみクラスで指定する場合は、CSSのセレクタに「要素名に続けてクラス名」を記述します。
classセレクタの説明は、以上です。
セレクタの中でも1番使うことになるセレクタなので、しっかりと覚えておきましょう。
- classセレクタは、
.の後に「class属性の値」を指定する - HTML文書中には、同じclass属性の値を重複して指定することができる
- class属性の値は、一般に「クラス名」と呼ばれる
- クラス名には、半角英数字、ハイフン（
-）、アンダースコア（_）を使うことができます。 - 数字や記号ではなく、アルファベットで始めましょう。
- 日本語をローマ字に置き換えるのではなく、英語で指定しましょう。
子孫セレクタ
セレクタを半角スペースで区切って並べることで、階層構造の対象を絞り込み指定することができます。
1
2
3
〇〇 〇〇 {
プロパティ名: プロパティ値;
}
例えば、以下のように半角スペースで区切るとします。
1
2
3
.container p span {
color: red;
}
上記のようにセレクタを区切ることで、「containerクラス内のp要素内のspan要素にだけスタイルを適用させる」ということができます。
See the Pen 子孫セレクタ by miyajima yuya (@pikawaka) on CodePen.
このようにスタイルを適用させる対象を絞り込む指定は、「子孫セレクタ」と呼ばれます。
半角スペースで複数のセレクタを区切ることによって、「〇〇内の〇〇に対してスタイルを適用する」というような絞り込み指定をすることができる
グループ化セレクタ
セレクタをカンマ（,）で区切ることで、グループ化することができます。
スタイルを適用する対象を複数指定する場合に使用します。
1
2
3
〇〇, 〇〇 {
プロパティ名: プロパティ値;
}
全ての一致する要素を選択して、波括弧の中に書いたスタイルを適用することができます。
例えば、以下のセレクタのようにh1, pと指定した場合は、HTMLファイルに含まれる全てのh1要素とp要素を選択して、要素の境界に実線を引きます。
1
2
3
h1, p {
border: solid;
}
See the Pen グループ化1 by miyajima yuya (@pikawaka) on CodePen.
カンマ（,）で区切るセレクタには、h1やpのような要素型セレクタだけではなく、idセレクタ、classセレクタを指定することができます。
1
2
3
h1, .last {
border: solid;
}
See the Pen グループ化２ by miyajima yuya (@pikawaka) on CodePen.
- セレクタをカンマで区切ることで、グループ化することができる
- グループ化することで、同じスタイルを複数の要素に適用できる
セレクタの詳細度
セレクタには詳細度という概念があり、簡潔に説明すると「セレクタの強さ」を表します。
同じ要素に対して複数のスタイルが競合する場合、どのスタイルを要素に適用するかを詳細度で決定します。より強いセレクタのスタイルが優先されます。
優先されるものを「詳細度が高い」と表現します。詳細度は、以下のように3列（ID列・CLASS列・TYPE列）の値で構成されます。左の列ほど詳細度が高くなります。
やや難しい内容ですが、詳細度を理解しておくと、CSSが意図した通りに反映されないという多くの問題解決に役立ちます。
基本セレクタの詳細度
これまでに学習した基本セレクタの詳細度は、以下の通りです。
詳細度は3列の値で構成されますが、各セレクタの数を数えることによって作成されます。例えば、ID列は各セレクタのidセレクタの数を表しています。
次のセレクタには、#sampleというidセレクタが1つだけ指定されているので、ID列に1を追加した1-0-0が値となります。該当しない列に数は追加されません。
1
2
3
#sample {
color: red; /* 1-0-0 */
}
次の例では、セレクタに.text-redという「classセレクタ」が1つ指定されているので、真ん中のCLASS列に1を追加した0-1-0の値になります。
1
2
3
.text-red {
color: red; /* 0-1-0 */
}
それでは同じ要素に対して複数のスタイルが競合する場合、この詳細度によって、どのような流れで要素に適用させるスタイルを決定しているのかを確かめてみましょう。
詳細度の計算（3つの列の比較）
詳細度は、それぞれの列の数値を左のID列から比較します。
競合するセレクタのID列が比較されて、ID列の値が大きいセレクタが勝ちます。ID列を比較しているとき、他の列の値は関係ありません。
ID列の値が同じであれば、次のCLASS列の値を比較します。CLASS列の値が同じであれば、次のTYPE列の値を比較します。
3つの列の比較は、実際にサンプルコードを使って詳しく解説するよ！
競合するセレクタのID列の値を比較する
以下のHTMLを例に詳細度の計算をみていきましょう。
1
<p id="sample" class="text-red">sample text</p>
上記のp要素に対して、以下のCSSで#sampleというidセレクタと.text-redというclassセレクタで文字色を指定します。
1
2
3
4
5
6
7
#sample {
color: green;
}
.text-red {
color: red;
}
このときp要素のスタイルは競合状態です。p要素には#sampleと.text-red、どちらのスタイルが適用されるでしょうか。
答えは#sampleのスタイルが適用されて、文字色は緑となります。
なぜ#sampleのスタイルが適用されるのかは、詳細度の計算で理解することができます。詳細度の観点からスタイル適用までを確認していきましょう。
各セレクタの詳細度は、以下の通りです。
1
2
3
4
5
6
7
#sample {
color: green; /* 1-0-0 */
}
.text-red {
color: red; /* 0-1-0 */
}
まず、競合するセレクタのID列の値が比較されます。
ID列の値は各セレクタにあるidの数で、#sampleは1、.text-redは0です。
ID列の値が大きいセレクタが勝ちます。
そのため、ID列の値が大きい#sampleのスタイルがp要素に適用されます。
See the Pen 詳細度1 by miyajima yuya (@pikawaka) on CodePen.
ID列の値を比較するときに、他の列は関係ありません。
次のCLASS列の値が#sampleよりも.text-redの方が大きかったとしても、関係ありません。重要なのは最初のID列の値だけです。
競合するセレクタのID列の値が同じ場合のみ、次のCLASS列の比較に移ります。
ID列の値が同じであれば、次のCLASS列の値を比較する
競合するセレクタのID列の値が同じ場合は、次のCLASS列の値を比較します。
次の例では、CSSのセレクタに「idセレクタ」はないので、.text-redとpのどちらのセレクタもID列は0です。この場合、次のCLASS列の値を比較します。
1
<p class="text-red">sample text</p>
1
2
3
4
5
6
7
.text-red {
color: red; /* 0-1-0 */
}
p {
color: yellow; /* 0-0-1 */
}
ID列の値が同じ場合は、TYPE列の値に関係なく、CLASS列の値が大きいセレクタが勝ちます。CLASS列の値は各セレクタにあるclassセレクタの数です。
CLASS列の値はpよりも.text-redの方が大きいので、.text-redが勝ちます。
HTMLのp要素には.text-redのスタイルが適用されるので、以下のように文字は黄色ではなく、赤色となります。
See the Pen 詳細度2 by miyajima yuya (@pikawaka) on CodePen.
競合するセレクタのID列とCLASS列の値が同じ場合のみ、次のTYPE列の比較に移ります。
ID列とCLASS列の値が同じであれば、次のTYPE列の値を比較する
競合するセレクタのID列とCLASS列の値が同じ場合は、次のTYPE列の値を比較します。
次の例では、CSSのセレクタにidとclassのセレクタがないため、pと*のどちらのセレクタもID列とCLASS列は0です。この場合、次のTYPE列の値を比較します。
1
<p>sample text</p>
1
2
3
4
5
6
7
p {
color: yellow; /* 0-0-1 */
}
* {
color: blue; /* 0-0-0 */
}
TYPE列の値は、各セレクタにある要素型セレクタの数です。
TYPE列の値は*よりもpの方が大きいので、pが勝ちます。
HTMLのp要素には要素型セレクタであるpのスタイルが適用されるので、以下のように文字は青色ではなく、黄色となります。
See the Pen 詳細度3 by miyajima yuya (@pikawaka) on CodePen.
詳細度が同じ場合（3つの列の値が同じ）
同じ要素に対して複数のスタイルが競合する場合、詳細度は左のID列から比較し、どのスタイルを適用するかを決めていましたね。
ID列の値が同じであれば、次のCLASS列を比較し、ID列とCLASS列が同じ値であれば、次のTYPE列の値を比較します。
それでは、以下のように競合するセレクタの値が3列とも同じ場合、どのようにしてスタイルが決まるのでしょうか。
1
<p class="text-red text-blue">sample text</p>
３つの列の値が同じ場合は「詳細度」ではなく、「出現順序」の判定基準によって、後に登場したスタイルが優先されます。
以下のCSSでp要素に適用されるスタイルは、後に登場する.text-blueです。
1
2
3
4
5
6
7
.text-red {
color: red; /* 0-1-0 */
}
.text-blue {
color: blue; /* 0-1-0 後にあるので勝ち*/
}
See the Pen 詳細度、３つの列の値が同じ場合 by miyajima yuya (@pikawaka) on CodePen.
競合するセレクタの値が3列とも同じ場合は、後に登場したスタイルが優先される
次は複数のセレクタを指定した場合の詳細度を学びます。
複数のセレクタで構成されるルールセットの詳細度
これまでは、主に「単一のセレクタで構成されたルールセット」の詳細度について学習してきました。
それでは「複数のセレクタで構成されるルールセット」の詳細度は、どのように決まるのでしょうか。
複数のセレクタで構成される場合でも、詳細度の値は各セレクタの数を数えることによって作成されます。
子孫セレクタの具体例を挙げて解説します。
子孫セレクタの詳細度
子孫セレクタは、半角スペースで区切ることによって「スタイルの適用対象を絞り込む」ことができるセレクタでしたね。
まずは、詳細度の値をみてみましょう。
子孫セレクタのように複数のセレクタで構成されるルールセットでも、詳細度は「ID列・CLASS列・TYPE列」に当てはまるセレクタがいくつあるかを数えるだけです。
例えば、以下のルールセットの場合は、3つの要素型に基づいて 0-0-3となります。
1
2
3
main p span {
color: green; /* 0-0-3 */
}
上記のセレクタの箇所にmain、p、spanの3つの要素型セレクタが指定されます。
要素型のセレクタは、1番右の列であるTYPE列に当てはまるので、詳細度は1番右の列に3を追加した0-0-3となります。
次の例では、セレクタの箇所に.parentと.childの2つのクラスセレクタがあるので、詳細度はCLASS列に2を追加した0-2-0となります。
1
2
3
.parent .child {
color: green; /* 0-2-0 */
}
次のように要素名に続けてクラス名を指定する場合は、1つのクラスセレクタ、1つの要素型に基づいて、0-1-1となります。
1
2
3
li.text-red {
color: red; /* 0-1-1 */
}
「子孫セレクタ」で「要素名に続けてクラス名」を指定する場合でも、各セレクタの数を数えるだけになるので、1つのクラスセレクタ、2つの要素型に基づいて、0-1-2となります。
1
2
3
ul li.text-red {
color: red; /* 0-1-2 */
}
各セレクタの数を数えて、3列に当てはめるだけだね！
同じ要素に複数のスタイルが競合する場合
同じ要素に対して複数のスタイルが競合する場合、詳細度は左のID列から比較し、どのスタイルを適用するかを決めていましたね。
複数のセレクタを指定する場合でも、この計算方法は変わりません。
次の例の#sampleとmain p spanのように、どんなに複数のセレクタを指定しても、ID列が0であれば負けてしまいます。
1
2
3
4
5
6
7
<main>
<p>
<span id="sample">
sample text
</span>
</p>
</main>
1
2
3
4
5
6
7
#sample {
color: red; /* 1-0-0 勝ち! */
}
main p span {
color: green; /* 0-0-3 */
}
スタイルが競合する場合は、ID列の値から比較されることを覚えておきましょう。ID列を比較する際に、他の列の値は関係ありません。
インラインスタイルの場合
CSSをHTML文書に適用させる際には、style属性で単一の要素のみ適用することができましたね。以下のようにHTMLの要素にstyle属性でスタイルを指定します。
1
<要素名 style="プロパティ: プロパティ値;"></要素名>
1
<p style="color: red;">CSSとは「Cascading Style Sheets」の略です。</p>
このようなインラインスタイルは、最も高い詳細度を持つので注意が必要です。
詳細度は、ID列-CLASS列-TYPE列（0-0-0）の値で構成されますが、インラインスタイルは、1-0-0-0という詳細度を持ちます。
以下のようにID列の値が大きくても、インラインスタイルには勝てません。
1
<p id="sample" style="color: red;">CSSとは「Cascading Style Sheets」の略です。</p>
1
2
3
#sample {
color: green; /* 0-1-0-0 */
}
See the Pen インラインスタイルの詳細度 by miyajima yuya (@pikawaka) on CodePen.
最も高い詳細度を持つインラインスタイルを上書きする場合は、!importantを使うしかありません。
!important
!importantは、これまでの詳細度の計算を無効にする特別なCSSです。
特定のプロパティと値を「最も重要であると指定する」もので、CSSの同じ要素に対してスタイルが競合した場合の優先順位（カスケード）のルールを上書きします。
次のように!importantは、プロパティ値のすぐ後に書きます。
1
2
3
#sample {
color: green!important;
}
See the Pen !importantを使う場合 by miyajima yuya (@pikawaka) on CodePen.
!importantは最も高い詳細度を持つインラインスタイルを無効にしてしまうものなので、安易に使わないようにしよう。
!importantは「外部ライブラリのスタイルを上書き」や「既存のソースコードを変更できない」という初学者の内はあまり遭遇しない状況で使われます。このような場合は「なぜ!importantを使うのか」を必ずコメントで残しましょう。
- 要素名にスタイルを指定しない
- idではなくclassセレクタを使う
- !importantを安易に使用しない
この章のまとめ
重要なポイントをおさえよう！
- セレクタとは、スタイルを適用する対象をWebブラウザに伝えるためのもの
- セレクタには、セレクタの強さを表す「詳細度」という概念がある
- 同じ要素に対して複数のスタイルが競合する場合、より強いセレクタのスタイルが優先される
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します