CSS2 Selectors

Contents

属性セレクタ
- class 属性
文脈セレクタ
一意セレクタ
疑似クラス
疑似要素
- :first-letter, :first-line 疑似要素
- :before, :after 疑似要素
  - counter, counters

属性セレクタ

CSS1 では単独セレクタは HTML の要素か class 属性の属性値しか選べませんでした。

/* 単独セレクタ */
p { font-size: medium }
p.note { font-style: italic }

一つ目のセレクタは任意の P 要素にマッチし、二つ目は class="note" を持つ P 要素にマッチします。

CSS2 では更に任意の属性とその属性値を指し示すセレクタが用意されました。

属性値に関わらず、 href 属性を持つ任意の A 要素；

a[href] { text-decoration: underline }

target 属性の属性値が _blank である全ての A 要素；

a[target="_blank"] { font-weight: bold }

rel 属性の「copyright copyleft copyeditor」という値にマッチ；

A[rel~="copyright"] { font-family: monospace }

属性名と等号の間に ~ が挿入されている事に注意して下さい。複数の属性値が半角スペースで区切られて列挙されている時、その中から一つを探し出します。

lang 属性に「en」で始まる値を持つ要素にマッチする。すなわち「en」「en-US」「en-cockney」などにマッチする；

*[LANG|="en"] { color : red }

属性名と等号の間に | が挿入されている事に注意して下さい。属性値がハイフンで区切られている時、その前半単語を探し出します。

属性値の任意の断片はセレクタになり得ません。

class 属性

class 属性の属性値が複数（一つ以上）有る場合、半角スペースで区切られた複数の属性値は単独でセレクタになり得ます。

<p class="note access">
class 属性値が note と access である場合。
</p>

この時、 class 属性値 note にマッチするセレクタは、次の何れも等価です；

p.note { font-style: italic }
p[class~=note] { font-style: italic }

或る class 属性値を持つ全ての要素にマッチさせる事も出来ます；

*.note { font-style: italic }        /* class~="italic" を持つ全要素*/
.note { font-style: italic }         /* 上に同じ *

複数の class 属性値を指定する事も出来ます；

p.note.access { font-weight: bold }  /* class 属性値に note, acecss を含む P 要素*/

この時、 class="note internet access" にはマッチしますが、 class="note print style" にはマッチしません。

文脈セレクタの拡張

CSS1 では文脈セレクタは要素の木構造に対して先祖、子孫しか区別できませんでした。

/* 文脈セレクタ */
p em { color: red }

この記述方法では、 P 要素の子孫要素である全ての EM 要素の文字色が赤に設定されてしまい、 P 要素の直接の子要素だけを取り出す事は出来ません。

子孫セレクタ

CSS2 では子要素を除いた、孫要素以降の子孫要素にだけマッチするセレクタが用意されました。

/* 子孫セレクタ */
div * p { font-size: 10.5pt }

アスタリスク * がワイルドカードの役割を果たし、「 DIV 要素の任意の子孫要素 (*) のさらに子孫要素である P 要素」を指定する文脈セレクタです。 * 前後の半角スペースに注意して下さい。

この P 要素は最低一つの任意の祖先要素を持ち、さらにその祖先要素に DIV 要素を持つと言う指定です。

子供セレクタ

孫要素以降を指定するには、ワイルドカード * を用いればできました。

子要素だけを指定したい場合、「大なり」不等号記号を用います。

/* 子供セレクタ */
body > p { line-height: 1.5 }

BODY 要素の直接の子要素である P 要素の行高がフォントサイズの 1.5 倍に設定されています。

BODY 要素の孫要素以降の子孫要素にはマッチしません。

兄弟セレクタ

兄弟セレクタ（隣接セレクタ）は、或る要素の共通の子要素であり、且つ会い前後して隣接する要素にマッチするセレクタです。

h1 + h2 { margin-top: -5mm }

この例では、 H1 要素の直後に隣接する H2 要素の上マージンを削減します。但し、この H1 要素と H2 要素が異なる祖先要素を持つ木構造の場合はマッチしません。

<!--兄弟要素-->
<body>
  <h1>Level 1 Headings.</h1>
  <h2>Level 2 Headings.</h2>
  <p>Paragraph Elements.</p>
</body>

<!--兄弟要素ではない-->
<body>
  <h1>Level 1 Headings.</h1>
  <div class="section">
    <h2>Level 2 Headings.</h2>
    <p>Paragraph Elements.</p>
  </div>
</body>

一意セレクタ

一意セレクタには CSS1 からの変更点は有りませんが、属性セレクタよりも優先する旨明記されました。

<p id="URI">
URI = URN + URL.
</p>

この時、属性セレクタ p[id="URI"] よりも p#URI の方が優先します。

疑似クラス

CSS1 での疑似クラスにはアンカー疑似クラスが有りました。CSS2では更に first-child 疑似クラス、 lang 疑似クラスが追加されました。

リンクに関する疑似クラス

CSS1
:link	未訪問のリンク	A[href] 要素のみ
:visited	訪問済みのリンク	A[href] 要素のみ
:active	訪問済みのリンク	CSS2 では任意の要素

CSS1 で用意された :link, :visited 疑似クラスは href 属性を持つ A 要素にしかマッチしないので、次のように書いても等価です；

a[href]:link { color: maroon }
a:link { color: maroon }
:link { color: maroon }

CSS2 では、 :active は任意の要素に対してマッチできます。

CSS2 では、 :link, :visited は他の疑似クラスと排他的ですが、 :active は他の疑似クラスと共存可能で、 :link であり且つ :active な A 要素が存在可能です。

CSS2
:hover	カーソルが上に乗っており、且つアクティブでない要素
:focus	テキスト入力にフォーカスされている要素

:focus は、テキスト入力カーソルがアクティブなテキスト・エリアなどにマッチする疑似要素です。

これらの疑似クラスの継承関係に注意して、記述順番を考えなければなりません。

:link    { color: red }    /* 未訪のリンク */
:visited { color: blue }   /* 訪問済みのリンク */
a:hover   { color: yellow } /* カーソルが上に乗っているリンク */
a:active  { color: lime }   /* アクティブ中のリンク */

a:hover が :link, :active よりも前に記述されていると、 a:hover のスタイルは :link, :active のスタイルに上書きされてしまいます。

また、この例では a:hover が a:active よりも前に記述されているので、ホバー状態でもアクティブ状態のスタイルが適用されます。

:first-child 疑似クラス

或る要素が親要素の中で最初に現れる子供要素である場合にだけマッチします。

p:first-child { color:maroon }

任意の親要素に対して最初に現れる子供要素である P 要素にだけマッチします。次の例では、二つ目の P 要素が DIV 要素の最初に現れる子供要素になっているので、二つ目の P 要素にだけマッチします；

<div class="chapter">
  <h1>Level 1 Headings.</h1>
  <p>section start;</p>
  <div class="section">
    <p>paragraph contents.</p>
    <p>second paragraph contents.</p>
  </div>
</div>

:first-child は指定された要素の親要素を自動的に想定しますので、次の二つのセレクタは等価です；

* > p:first-child
p:first-child

:lang 疑似クラス

lang 属性を疑似クラスとしてセレクタに用いる事が出来ます。

:lang(ja) { line-height: 1.5 }
p:lang(en) { font-style: italic }

一つ目のスタイルは lang="ja" （日本語）であるあらゆる要素に対してマッチします。二つ目のスタイルは lang="en" である P 要素にだけマッチします。

属性セレクタを用いたものと等価です；

p:lang(ja) { line-height: 1.5 }
p[lang="ja"] { line-height: 1.5 }

疑似要素

:first-letter, :first-line 疑似要素

CSS1 では :first-line, :first-letter 疑似要素が用意されていました。

CSS1
:first-line	ブロック要素の一行目に整形された文字列
:first-letter	一部のブロック要素の一文字目

指定可能なプロパティが制限を受けます；

first-line: font properties、color properties、background properties、'word-spacing'、'letter-spacing'、'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'clear'
first-letter: font properties、color properties、background properties、margin, padding, border, 'text-decoration'、'vertical-align'、'text-transform'、'line-height'、'text-shadow'、'float'、'clear'

:first-letter 疑似要素の場合、一文字目に引用符などの区切り文字が来た場合は、二文字目も含むものと規定されています。

p { font-size: 12pt; line-height: 1 }
               /* 文字のサイズを 12pt, 行高を 12pt*1=12pt に */
p:first-letter { float: left; font-size: 200% }
               /* 一文字目を左端にフロートしサイズを二倍に */
p:first-line { font-weight: bold }
               /* 一行目を太字に */

<p>
THE TRAGEDY OF MACBETH; 1606; William Shakespeare.
</p>
<p>
"Anon!
Fair is foul, and foul is fair.
Hover through the fog and filthy air."
</p>

【表示概念図】

___
 | HE TRAGEDY OF MACBETH;
 | 1606; William Shakespeare.
 "/| non! Fairis foul,
 /-| and foul is fair.
 Hover through the fog
 and filthty air."

【表示例】

THE TRAGEDY OF MACBETH; 1606; William Shakespeare.

"Anon! Fair is foul, and foul is fair. Hover through the fog and filthy air."

:before, :after 疑似要素

要素の直前、直後に文字列を挿入できます。

/* class 属性が note である P 要素の直前に Note: と云う文字列を挿入します； */
p.note:before { content: "Note: " }

整形時には、この挿入された文字列も当該要素の内容の一部として処理されます。

content	[ <string> \| <uri> \| <counter> \| attr(X) \| open-quote \| close-quote \| no-open-quote \| no-close-quote ]+ \| inherit

:before, :after 疑似要素にしか適用できません。
初期値は空の文字列 (empty string) です。
子孫要素に値が継承しません。

<string>

任意の文字列で、この文字列が挿入されます。
\A を記述するとそこで強制改行が起こります。

<uri>

url("xxx")
音、画像など当該文書以外のリソースを挿入する場合は URI (URL + URN) を記述します。

<counter>

counter(<name>), counter(<name>, <list-style-type>), counters(<name>, <string>), counters(<name>, <string>, <list-style-type>)

open-quote, close-quote

引用符を挿入します。

no-open-quote, no-close-quote

引用符を挿入しませんが、引用符の階層だけは変化します。

attr(X)

当該要素の属性名を X で指定し、その属性値を挿入します。

conunter, counters

countent プロパティを用いれば、要素に通し番号を挿入する事が出来る。入れ子構造を認識しない場合は counter を、 1.1, 1.1.1 などのように入れ子構造を認識する場合は couonters を持ちいる。

counter

/* デフォルト */
content: counter(name, decimal);

name は任意の文字列が可能で、この名称が共通するカウンタで通し番号が計算されます。

decimal は 1,2,3,... です。list-style-type プロパティで許される値がすべて利用できます。

/* Chapter1. , Chapter2. ,...*/
h1:before {
  content: "Chapter" counter(chapter, decimal) ". ";
                     /* Chapter1. , Chapter2. ,... */
  counter-increment: chapter 1;
                     /* カウンタ chapter の増価値 1 */
  counter-reset: section 0;
                     /* カウンタ section を 0 に初期化 */
}
/* 1.i , 1.ii ,...*/
h2:before {
  content: counter(chapter) "." counter(section, lower-roman) " ";
                     /* 1.i , 1.ii ,... */
  counter-increment: section 1;
                     /* カウンタ section の増価値 1 */
}

counters

殆どの場合、同じ名称のカウンタの入れ子構造によって、 1, 1.1, 1.1.1 などのようにカウンタが表示されると便利です。

次の例は、 OL 要素の入れ子関係によって、カウンタが 1, 1.1, 1.1.1 のようになる例です；

ol { counter-reset: item 0 }
li:before { content: counters(item, ".", decimal);
   counter-increment: item }

item
item
1. item
2. item
  1. item
  2. item
3. item
item