5.セレクタ

5-1.パターンマッチ

セレクタのパターンを以下に示す。CSS2では要素だけでなく属性や属性値に対する定義が可能になった。

5-2.グループ化（Grouping）

スタイルシートの定義を簡略化する方法の一つにグループ化があります。グループ化は、次の例のように「セレクタ，セレクタ」とカンマで区切って並べます。

EM,BLOCKQUOTE.bgred { color: red   ; }

2つの例は同じものです。

EM               { color :red }
BLOCKQUOTE.bgred { color :red }

また、次の例のように、宣言を並列に並べることでスタイルを一括して定義することができます。

H1 { 
  font-weight: bold; 
  font-size: 12pt;
  line-height: 14pt; 
  font-family: helvetica; 
}

次の例は、簡略化プロパティの例です。

H1 { font: bold 12pt/14pt helvetica }

２つの定義は同じものです。

H1 {
   font-weight: bold;
   font-size  : 12pt;
   line-height: 14pt;
   font-family: Helvetica;
}	

5.3 全称セレクタ（Universal selector）

全称セレクタ（universal selector）はアスタリスクで示され、あらゆる要素名とマッチします。

*.warning {color:red}
/*これは次の定義と同じです*/
.warning  {color:red}

全称セレクタはCSS1では出てこなかったので、例によってブラウザごとに見栄えの違いを評価してみたところ、やはりNC4.xxでは使えませんでした。

NC4.75	IE5.01	Netscape6.1

全称セレクタのテストページ

5-4.子孫セレクタ（Descendant selectors）

子孫セレクタは、たとえば、Blockquote要素の内容にあるP要素には、他のP要素とは異なるスタイルを採用させたいときなどに用います。使い方は、次の３つめの例のように、要素半角スペース要素とします。

EM            { color: red   }
BLOCKQUOTE    { color: black }
BLOCKQUOTE EM { color: blue  }

<P><EM>この文章の文字は赤になります。</EM></P>
<BLOCKQUOTE>
この部分の文字は黒色です。
<EM>この部分の文字色は文脈セレクタで定義した青になります。</EM>
</BLOCKQUOTE>

ここまでは、IE5.0、NC4.75、Netscape6で実装されています。

子孫関係が深くなってきた場合にも対応できる方法として、*（アスタリスク）を挿入することで可能となる。*の両側にスペースが置かれていることに注意です。

div * em { color: green }

*を使った表現は全称セレクタの場合と同じく、NC4.75では認識できませんでした。 テストページ

5-5.子供セレクタ（Child selectors）

子供セレクタは、選択対象の要素がある別の要素の子供である時に定義され、「要素1 > 要素2」のように使います。

BODY > P { line-height: 1.3 }

次の例では、UL要素とOL要素のそれぞれの子供であるLI要素の色を別々に定義するものです。

ol > li { color : red }
ul > li { color : blue }

テストページ、下はその結果ですが、IE5.01では>以前を無視した効果に、IE5.5ではNC4.75と同じく子供セレクタ全体で効果がありませんでした。

IE5.01	IE5.5SP1	NC4.75	Netscape6.1

5-6.隣接セレクタ（Adjacent sibling selectors）

隣接セレクタは「要素1 + 要素2」という形式の構文を持ち、この場合要素2がセレクタの主体になる。このセレクタは、要素1と要素2の親要素が同じで、なお且つ要素2が要素1の直後に後行する場合にマッチする。

次の例では、H1とその直後のH2の間にある垂直マージンを削減することができます。

H1 + H2 { margin-top: -5mm }

テストページ、下はその結果ですが、IE5.01では+以前を無視した効果に、IE5.5ではNC4.75と同じく隣接セレクタ全体で効果がありませんでした。

IE5.01	IE5.5SP1	NC4.75	Netscape6.1

5-7.属性セレクタ(Attribute selectors)

ある属性を持つ要素へのスタイルを定義するもので次のように、[属性名]を用います。注意するのはプロパティと属性セレクタの間に空白を入れてはいけないことです。下記の例だと、aと[は連続していなければいけません。

a[name] { text-decoration: none  }

テストページ、下はその結果で、IE5.01およびIE5.5はまだ属性セレクタには対応していませんでした。

IE5.01	NC4.75	Netscape6.1

この方法では、特定の属性値までを定義することが可能です。

a[target=top] { text-decoration: none  }

属性セレクタのマッチ方法には次の4通りがあります。

[属性]

属性値に関わらず、指定された属性を持つ要素にマッチする。

[属性=値]

指定された属性・値を持つ要素にマッチする。

[属性~=値]

指定された属性の値がスペースで区切られた単語のリストになっている場合にマッチ。

[属性|=値]

指定された属性の値がハイフンで区切られた単語のリストになっており、そのリストの先頭単語が指定された値と同じである要素にマッチ。

5-8.クラスセレクタ(Class as selector)

要素を越えたきめこまかいスタイルを定義するために、HTML にCLASS属性 が用意されています。クラスセレクタは、次のようにピリオド＋クラス名称で示し、要素.クラス名と、.クラス名の方法があります。

P.bgwhite     { background-color: white ;}
.bgyellow     { background-color: yellow;}

HTMLファイルでは、CLASS属性でこのスタイルを利用することができます。

<P class="bgwhite">文字は黒のままで背景が白になる</P>

クラス名には、英数しか使えないようです。IE4で確認しましたがアンダーバー'_'は使えませんでした。

5-9.IDセレクタ（ID as selector）

HTMLファイルでUniqueな値を持たせるために、HTMLではID属性が用意されています。IDセレクタは、次のように＃英数が用いられます。

#z98y { letter-spacing: 0.3em }

<P ID=z98y>Wide text</P>

IDセレクタは、HTMLファイル中で一つの名前のIDしかつけられません。

擬似クラス（Pseudo-classes）

(1)first-child 擬似クラス

first-child疑似クラスは、ある別の要素の最初の子供要素にマッチします。

DIV > P:first-child { color: red }

DIVの直後のP要素にはマッチしますが、直後でないP要素にはマッチしません。

<div>
<p>ここは赤になります。</p>
<p>ここは別の色になるでしょう。</p>
</div>

(2)リンク擬似クラス(The dynamic pseudo-classes)

リンクに関する擬似クラスでCSS2では次の2つがあります。

A:link    { color: red  }   /* 未訪問のリンク unvisited link */
A:visited { color: blue }   /* 訪問済みリンク visited links */

(3)動的擬似クラス

動的な擬似クラスでCSS2では次の3つがあります。

:active    { color: red  }   /* 動作中のリンク*/
:hover 	{ color: blue }   /* ユーザが指し示しているリンク*/
:focus 	{ color: blue }   /* キーボード動作やその他のテキスト入力にフォーカスされている場合*/

hoverやfocus擬似クラスは、アンカー（A要素）以外の要素に対しても適用が可能です。

注意点として、次のように:hoverをつける順が逆になると、先に定義した:hoverによる文字色が赤になる効果がなくなることですので、:hoverは必ず:link、:visitedの後ろに記述しましょう。

a:hover 	        { color: red   }
a:link,a:visited    { color: blue  }

擬似要素（pseudo-elements）

(1)first-line 疑似要素

(2)first-letter 疑似要素

(3):before及び:after 疑似要素

:before'及び':after'疑似クラスを利用すると、ある要素の内容の前後に生成内容を挿入することが可能となります。生成内容はcontentプロパティと組み合わせることで表示することができます。

P.new:after { content: " New!" }

<p class="new">最近の日記</p>

Netscape６ではこのように表示されて見えます。

最近の日記 New!

さて、このままでは色変化が無いので少しさびしいので、次のように定義を変更してみます。

P.new:after { color: red ;content: " New!"}

ところが、この定義順だと、文字色を定義する内容が決まっていないのでちゃんと表示されません。

最近の日記 New!

このように定義すると、New!が赤く表示されるようになります。

P.new:after { content: " New!" ; color: red }

最近の日記 New!

次はcontentプロパティに画像を表示させる例で、を使ってみました。

P.new:after { content: url("new.gif")}

Netscape6では次のように表示されます

最近の日記

さてさて、次はカウンタです。

.counter:before {
  content: counter(section) "." ;  /* sectionという名称のカウンタを表示する。 */
  counter-increment: section ;  /* sectionというカウンタをインクリメント（+1）する。 */
  color : red ;
}

次のようなHTMLを考えます。

<h5 class="counter">はじめに</h5>
<h5 class="counter">次に</h5>
<h5 class="counter">おわりに</h5>

これは、CSS2を実装するブラウザなら本来このような表示となるはずです。

1.はじめに
2.次に
3.おわりに

でも、残念ながら、Netscape6.01ではまだカウンタ機能を実現しておらず、次のような表示になります。見出しをつけていれば、自動的に番号が振られるって、技術資料とかを書いているとめちゃくちゃ重宝するので、早く実現してくれるといいですね。

はじめに   　　←Netscape6.01の実際の見栄え
次に
おわりに

テストページ

Index