CSS の用語
マークアップ言語のスタイルを記述する「 CSS 」は、スタイルを記述するためのプログラミング言語です。「 CSS 」は、その他のプログラミング言語と同じように、独自の用語を持っています。
今回は、「 CSS 」の用語の中から「 セレクタ 」を確認します。
セレクタ
(
0x14e) では、 CSS のサンプルファイル「 style1.css 」に、次のスタイルを記述しました。
strong {color: red;}
(
0x14d) では、この記述の内、「 color 」を「 property 」と呼び「 red 」を「 value 」と呼ぶことを確認しました。また、「 { } 」で囲まれた部分は「 ブロック 」と呼び、全体を「 規則セット 」( ruleset ) と呼ぶことも確認しています。
つまり、「 : 」( colon ) でセパレートされた「 color: red 」が「 規則 」( rule ) であり、「 規則 」はブロック内で複数記述 ( rule set ) 出来ます。
上記ルールは、文字列「 strong 」から始まっています。(
0x14e) で確認した通り、これは、HTML 要素「 strong 」を指定しますが、CSS ではこれを「 セレクタ 」( selector ) と呼びます。
「 セレクタ 」は、HTML 要素だけを指定するものではありません。
CSS の「 セレクタ 」は、HTML 要素 ( element ) の他に、HTML 属性 ( attribute ) である「 class 」と「 id 」の指定にも利用します。
属性 class
HTML 属性「 class 」は、HTML 要素 ( タグ ) 内で、「 class="class_name" 」と記述して、その HTML 要素を「 class_name 」という名前のクラスに所属させます。
次の項で確認する属性「 id 」と異なり、属性「 class 」は 1 つのドキュメント ( 1 ページ ) 中で複数回利用することが出来ます。
つまり、次の様に「 class_name 」というクラスに属する要素はいくつあっても構いません。
<p class="class_name"> ... </p>
...
...
<p class="class_name"> ... </p>
...
<p class="class_name"> ... </p>
属性 id
HTML 属性「 id 」は、HTML 要素内で、「 id="identification" 」と記述して、その HTML 要素に「 identification 」という識別子を与えます。
前述した属性「 class 」と違い、識別子とは固有の情報であるべき ( そうでなければ識別出来ない ) なので、1 つのドキュメント中では 1 つしか利用出来ません。
これは、通常ページのヘッダやフッタといった 1 ドキュメント中に 1 つしかない要素に指定します。
例えば、同じ要素「 div 」でも次の様に指定することで、まったく固有の要素として識別することが出来ます。
<div id ="header"> ... </div>
<div id ="main"> ... </div>
<div id ="footer"> ... </div>
また、属性「 id 」は 1 ドキュメント中で固有であることから、次の様に「 # 」( numerical sign : hash mark ),「 id 」と指定することで、ページ内リンクを作ることも出来ます。
<a href="#identification">id が identification の要素に移動</a>
次のリンクは、属性「 id 」を利用したページ内リンクです。
---
id が identification の要素に移動 ---
属性「 id 」はこうした特性と利用方法を持つため、1 ドキュメント内で 1 つしか利用出来ないわけです。
HTML 属性「 class 」と「 id 」の使い分けについては、次のページに詳しく記載されています。具体的でポイントを押さえた分かりやすい解説です。
スタイルシートの class と id の使い分け - All About
なお、属性「 id 」は固有でなければなりませんが、「 id 」と「 class 」は併用 ( ひとつの要素に同時に指定 ) 可能です。
CSS セレクタとしての「 class 」と「 id 」
Selectors - MDN の例示では、HTML 要素「 p 」に対して、次の様に「 id 」と「 class 」を指定しています。
<p class="key" id="principal">
この class「 key 」と、id「 principal 」に対して CSS でスタイルを指定するには、次の様に記述します。
まず、class を指定します。CSS で class を指定する場合は、クラス名の先頭に「 . 」( period ) を追加します。
.key {color: green;}
id を指定する場合は、ページ内リンクを生成する場合と同じく、id の先頭に「 # 」を追加します。
#principal {font-weight: bolder;}
セレクタの優先度
1 つの HTML 要素に対して、複数のルールが同じ property で指定されていた場合は、class セレクタより id セレクタの方が優先されます。これは、より限定的なセレクタの優先度が高いことを意味します。
つまり、通常の HTML 要素名 ( タグ ) と class セレクタを比較した場合は、class セレクタの方がより限定的なので、class セレクタが優先されますが、class セレクタと id セレクタを比較した場合は、より限定的な id セレクタが優先されるということです。
また、同じ class セレクタであっても、次の様に HTML 要素名と組み合わせることで、より限定的して優先度を上げることが可能です。
p.key {color: green;}
また、セレクタには「 [type=button] 」の様に、属性「 type 」に値「 button 」が指定された要素のみを指定するものもあります。
仮に、同じスタイルシート内に、同レベルの限定度合いを持ったセレクタの衝突があった場合は、より末尾に近い ( 後から読み込まれる ) ルールを優先します。
セレクタの実例
Selectors - MDN の例示では、実施例として次の HTML コードが例示されています。
これは、"
What is CSS" で作成したサンプルファイル「 doc1.html 」の中で、要素「 p 」で囲んだ行をコピーして、個別の属性「 id 」と属性「 class 」を指定したものです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sample document</title>
<!-- add css 00 -->
<link rel="stylesheet" href="style1.css">
</head>
<body>
<p id="first">
<strong strong class="carrot">C</strong>ascading
<strong strong class="spinach">S</strong>tyle
<strong strong class="spinach">S</strong>heets
</p>
<p id="second">
<strong>C</strong>ascading
<strong>S</strong>tyle
<strong>S</strong>heets
</p>
</body>
</html>
次に、(
0x14e) で作成した CSS ファイル「 style1.css 」で次のスタイルを記述します。
strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}
これは、Web ブラウザによって次の様に表示されます。
HTML 要素名のセレクタ「 strong 」よりも、class セレクタ「 carrot 」と「 spinach 」が優先されています。
なお、この中で最も優先度が高いのは、id セレクタ「 font-style 」です。
0x151 -> 0x152 へ
CSS の「 class 」と「 id 」の使い分けをしっくり理解出来なかった僕は、過去に何度か Web 制作関係の方々に質問して来ましたが、いまいちしっくりくる回答を得ることが出来ませんでした。
しかしながら、今回の確認でその理解はかなり進みました。理解が進むのは気持ちがいいことです。
次回も引き続き CSS を確認します。
参考情報は書籍「 初めての Perl 第 6 版 」を中心に perldoc, Wikipedia および各 Web サイト。それと詳しい先輩。
目次 - Perl Index