7. Selectorの拡張

Contents

セレクタってなんだ？
セレクタの種類
html 要素のグループ化
Link pseudo-classes
The 'first-line' pseudo-element
The 'first-letter' pseudo-element

ここでは CSS1 で用意されたセレクタに付いて説明します。 CSS1 では原則的に要素と class 属性の値がセレクタになり得ます。

一方 CSS2 ではさらに一般の属性名、属性値もセレクタになり得るよう拡張されました。CSS2 セレクタに付いては、「CSS2 セレクタ」を参照下さい。

1. セレクタ

CSSは一般に、セレクタと宣言から成ります。宣言は、プロパティと値とからなります。

p { text-indent: 2em }

この例では、 P がセレクタ、 text-indent: 2em が宣言です。 text-indent がプロパティで、 2em がその値。一つのセレクタに対して、宣言が複数或る場合はセミコロン ';' で区切ります。

p { color: maroon; text-indent: 2em }

複数のセレクタに対して、共通のスタイルを宣言する場合は、複数のセレクタをカンマ ',' で区切ってグループ化することが出来ます。

h1, h2, h3 { font-family: sans-serif }

これは次のように書いたのと同じ事です。

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

html で用意された全ての要素はセレクタになり得ます。このようなセレクタを、タイプセレクタと呼びます。これを基本にして、セレクタを拡張することが出来ます。この章では、主に CSS1 で用意されたセレクタを紹介します。

2. SELECTOR の種類

タイプ・セレクタ

例えば、 H1 と云う要素にマッチするセレクタです；

h1 { font-weight: 900 }

子孫セレクタ

例えば、 P 要素の子孫要素である EM 要素にマッチするセレクタです；

html 文書の例；

<p>
ここは P 要素の内容部です。
或る要素の内容部に現れる要素のことを、
一般に<em>子孫要素</em>と呼びます。
</p>

対応するスタイルシートの例；

p em { color: red }

クラス・セレクタ

htmlでは、body 要素内の全ての要素に class 属性が指定できます。 id 属性や name 属性と異なり、 class 属性の値はファイル中で一意である必要は無く複数重複することができますし、またすべきです。

CSS では、 class 属性値を指し示すセレクタ（クラスセレクタ）が用意されています。

html 文書の例；

<p class="note">
ここは P 要素の内容部です。
この P 要素には、 class 属性が与えられており、
その属性値は note です。
</p>

対応するセレクタの例

p.note { font-style: italic }

ここでは class="note" を持つ P 要素だけにマッチするようにセレクタを書きましたが、 class="note" を持つ全ての要素にマッチするようにも書けます；

.note { text-decoratoin: underline }

一意セレクタ

要素に id 属性が与えられていれば、セレクタで参照できます。

id 属性はあらゆる要素に与えることが出来ます。

html 文書の例；

<h1 id="optical-properties">光学物性</h1>

対応するセレクタの例；

h1#optical-properties { color: yellow }

id 属性の値には、一つの文書中で一回だけしか用いられていないと云う一意性が必要です。別の場所に同じ id 属性を与えないようにくれぐれも注意が必要です。

3. DIV要素とSPAN要素―html要素のグループ化

ブロック・レベル要素である DIV 要素と、インライン要素である SPAN 要素は、其のままではなにも表さない要素です。これらは html で用意された要素のグループ化のためのものです。

DIV 要素は任意のブロック・レベル要素を子要素持ち得ます。 SPAN 要素は任意のインライン要素を子要素に持ち得ます。これらのグループ化要素に class 属性を与えることで、 html のマークアップ能力が飛躍的に向上し、 CSS による見栄えの指定もより木目細かく高度に実現可能になります。

<body>
  <h1>Chapter1 htmlの木構造</h1>
  <p>この節では html の構造を木構造と云う観点から考えます。</p>
  <h2>Section 1.1 Grouping 要素による構造化</h2>
  <p>DIV 要素はブロック要素を子要素に持ち得、
  SPAN 要素はインライン要素を子要素に持ち得ます。</p>
</body>

このサンプルに DIV 要素と SPAN 要素を追加してみましょう；

<body>
  <h1>
  <span class="counter">Chapter 1</span>
   htmlの木構造
  </h1>
  <p>この節では html の構造を木構造と云う観点から考えます。</p>
  <div class="section">
    <h2>
    <span class="counter">Section 1.1</span>
     Grouping 要素による構造化
    </h2>
    <p>
    DIV 要素はブロック要素を子要素に持ち得、
    SPAN 要素はインライン要素を子要素に持ち得ます。
    </p>
  </div>
</body>

H2 以下の論理構造を DIV.section 要素でグループ化しました。

/* sample CSS */
div.section { margin: 1em 2em;
  padding: 1em;
  border: 1pt solid #fcc }

【表示例】
Chapter 1 htmlの木構造この節では html の構造を木構造と云う観点から考えます。 Section 1.1 Grouping 要素による構造化 DIV 要素はブロック要素を子要素に持ち得、 SPAN 要素はインライン要素を子要素に持ち得ます。

【表示例】

Chapter 1 htmlの木構造

この節では html の構造を木構造と云う観点から考えます。

Section 1.1 Grouping 要素による構造化

DIV 要素はブロック要素を子要素に持ち得、 SPAN 要素はインライン要素を子要素に持ち得ます。

更に、H1 要素、 H2 要素の接頭語句は span.counter でマークアップされています。

div.section {
  margin: 1em 2em;
  padding: 1em;
  border: 1pt solid #fcc;
}
h1,h2 {
  text-align: right;
}
span.counter {
  font-size:0.9em;
  float: left;
  margin-right: 2em;
}

【表示例】
Chapter 1 htmlの木構造この節では html の構造を木構造と云う観点から考えます。 Section 1.1 Grouping 要素による構造化 DIV 要素はブロック要素を子要素に持ち得、 SPAN 要素はインライン要素を子要素に持ち得ます。

【表示例】

Chapter 1 htmlの木構造

この節では html の構造を木構造と云う観点から考えます。

Section 1.1 Grouping 要素による構造化

DIV 要素はブロック要素を子要素に持ち得、 SPAN 要素はインライン要素を子要素に持ち得ます。

【応用例；（ファイル）】

html文書の論理構造が複雑化するに連れ、要素のグループ化の重要性は益々上がります。

CSS1ではclassが殆ど万能で、全く新たにhtmlの要素を作れることになりますが、考えて使わないとhtmlでマークアップされた論理構造の普遍性が失われかねません。class属性はあくまでも、htmlで用意された論理構造のマークアップを拡張するものと思ってください。見栄えに釣られてむやみに増やすと管理できなくなります。

4. Link pseudo-classes

CSS1 での link 擬似クラスに付いて紹介します。ハイパーリンク（href 属性を持つ Anchor 要素）が訪問済みと未訪問で色が変化する「あれ」です。

或る要素に注目し、その状態によって区別するセレクタを「疑似クラス」と呼びます。 CSS1 では href 属性を持つ A 要素（リンク）に限り疑似クラスが定義されています。

CSS1

CSS1 では、リンク擬似クラスとして、次の三つがセレクタの接尾辞になりえます。

リンク疑似クラス
:link	未訪問のリンク
:visited	訪問済みのリンク
:active	作動中のリンク

これらの疑似クラスは何れも相互に排他的で、例えば「 :link 且つ :active な要素」は有り得ません。

【使用例】

a:link { color: navy }
a:visited { color: maroon }
a:active { color: green }

これらはリンク要素にしか適用できない疑似クラスなので、要素名は省略しても等価です。即ち、次の二行は全く同じ処理を指定しています；

a:link { color: navy }   /* :link 疑似クラスを持つ A 要素にマッチ */
:link { color: navy }    /* 上に同じ */

CSS2

CSS2 では CSS1 で定義されていた :active 疑似クラスが再定義された他、動的に変化する擬似クラスが追加されました。

動的な疑似クラス
:active	活動中の状態
:hover	カーソルなどのポインタが上に乗っている状態
:focus	テキスト入力などにフォーカスされている状態

ここに挙げた疑似クラスは相互に相補的であり、排他的では有りません。従って、「:hover であり且つ :active な要素」が存在し得ます。従って、スタイルの継承が通常の規則通りに適用されますので、記述する順番が重要になります；

:link { color: navy }        /* a:link と同じ */
:visited { color: maroon }   /* a:visited と同じ */
a:hover { color: purple }
a:active { color: green  }

上の例で、 a:hover が a:visited, a:link よりも前に記述されると、 a:hover のスタイルは上書きされてしまいます。また、 a:active が a:hover よりも後ろに記述されている為、リンクにカーソルが乗っていてもスタイルは a:active のものが適用されます。

5. The 'first-line' pseudo-element

実際にユーザーの端末に表示された時の一行目だけを特別に扱えます。'first-line'擬似要素はブロック要素にのみ取り付けられます。

':first-line'に適用できるプロパティは限られます:

:first-line に適用可能なプロパティ: font properties、color properties、background properties、'word-spacing'、'letter-spacing'、'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'clear'

  /* Style sample */
    p:first-line { font: bold}

ここでは、P要素の':first-line'擬似要素にスタイルを適用しました。このスタイルが導入されたhtmlファイルの組版上、P要素の一行目は太字になります。

【表示例】
A recent Rapid Communication states in its introductory paragraph: "..."

6. The 'first-letter' pseudo-element

当該のブロック・レベル要素の一文字目を特別に扱えます。

:first-letter に適用可能なプロパティ: font properties、color properties、background properties、margin, padding, border, 'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'float'、'clear'

<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0//EN">
<html>
 <head>
  <title>drop cap initial letter</title>
  <style type="text/css">
   <!--
    p              { font-size: 12pt; line-height: 12pt }
    p:first-letter { font-size: 200%;
                     font-weight: bold; float: left }
    span           { text-transform: uppercase }
   -->
  </style>
 </head>
 <body>
  <p><span>The first</span> few words of an article
    in the economist.</p>
 </body>
</html>

この例では、':first-letter' 擬似要素を除けば、 THE FIRST few words... となります。更に擬似要素のスタイルにより、一文字目の T が二行分の大きさを占めます。洋書では良くある組版ですね。

_____
  |  HE FIRST few words
  |  of an article in
the Economist.

【表示例】
The first few words of an article in The Economist.

ここでは主にCSS level 1のセレクタについて紹介しました。文脈セレクタ、クラス属性とhtmlのグループ化、リンク擬似クラスは実際のデザイン（組版）で必須になるでしょう。詳しくはW3CのCSS1仕様書、CSS2仕様書などのリファレンスを御確認下さい。

CSS level 2 で拡張されたセレクタに付いては、「 CSS2 セレクタ」を参照下さい。

SEO		[PR] ��!��u��O ��z�[��y�[�W�J�� C�u��