CSS セレクタに関するおさらい 3

Entry Information

yoshi
January 13, 2007 - 00:20.
html/css

前回の続きです。今回が最終回、擬似要素を中心にまとめています。

擬似要素についてですが、CSS3 では擬似クラスと擬似要素を明確に区別するため、擬似要素に関しては、「:」を 2回使って、「::」と記述することが定義されています。CSS2 までに準拠してコーディングする場合は従来どおり、「:」 1つの記述方法でも問題ありませんが、将来的にはこの記述方法が基本になる予定ですので、今回は仕様書に合わせて「::」と記述しています。

この「::」方式の記述ですが、実はモダンブラウザの多くはすでにこの記述方法に対応してたりしますので、今でも使えちゃいます。

擬似要素（pseudo-element）

E::first-line

E という要素の最初の 1行にのみスタイルを指定します。CSS1 で定義されています。1行目というのがフォントサイズやブラウザのウィンドウサイズ等、色々な条件で変わってきますので、注意が必要です。ちなみにブロック要素に対してのみ有効で、指定できるプロパティにも制限があります。

p {
     margin-left:1em;
     }
p::first-line {
     margin-left:-1em;
     }

などとして、例えば注釈などで先頭に「※」マークが付いた段落があって、テキストが折り返された時も「※」の分だけ 2行目以降は字下げしておきたいなどといった場合にも使用できます。

E::first-letter

E という要素の最初の 1文字にのみスタイルを指定します。CSS1 で定義されています。1文字目が特定の文字（引用符やカギ括弧など）の場合、次の文字と合わせてスタイルが指定されます。::first-line 擬似要素同様、ブロック要素に対してのみ有効で、指定できるプロパティにも制限があります。

E::selection

ユーザーが選択した文書に対してスタイルを指定します。例えばマウスドラッグ等にとってテキストを選択状態にした際の見た目を変えることができます。CSS3 で定義されました。

p::selection {
     background:#f00;
     color:#fff;
     }

などと指定することができます。

E::before
E::after

E という要素に含まれる内容の前（::before）後（::after）に指定した内容を生成します。content プロパティとの組み合わせでテキストや画像等を追加します。CSS2 で定義されています。

p.note::before {
     content:url(image/note-icon.png);
     margin:0 2px;
     }
li.new::after {
     content:"new!";
     color:#f00;
     }

クラスセレクタ（Class selectors）

E.warning

class 属性の値によってスタイルを指定します。おなじみのセレクタです。CSS1 で定義済み。

ID セレクタ（ID selectors）

E#myid

id 属性の値によってスタイルを指定します。クラスセレクタ同様、おなじみのセレクタです。CSS1 で定義済み。

否定擬似クラス（Negation pseudo-class）

E:not(s)

E という要素のうち、s でないものにスタイルを指定します。CSS3 で定義されました。

input { 
     vertical-align:middle;
     }
input:not([type="text"]) { 
     vertical-align:top;
     }

などとして、type="text" 以外の input 要素にのみ異なるスタイルを指定するなどといった使い方も可能です。

子孫セレクタ（Descendant combinator）

E F

複数のセレクタを組み合わせて使用する方法です。子孫セレクタは、親要素に含まれるすべての子孫要素に対してスタイルを指定します。ユニバーサルセレクタや、属性セレクタなどと組み合わせて使用できます。CSS1 で定義されています。

p span.note { 
     color:red;
     }
ul li * li { 
     margin-left:2em;
     }

子セレクタ（Child combinator）

E > F

子セレクタは、親要素の直接の子要素に対してスタイルを指定します。孫要素以下は対象になりません。CSS2 で定義されています。

隣接セレクタ（Adjacent sibling combinator）

E + F

E という要素から見て直接の弟要素である F という要素にスタイルを指定します。CSS2 で定義されています。

兄弟要素とは、ある親要素内で、同列に存在する要素のうち、前（兄）後（弟）に存在する要素を指します。さらに直接の弟要素とは、E という要素と同列で、Eという要素の直後に隣接して存在する要素を指します。例えば次のような場合、h2 要素は h1 要素の直接の弟要素です。

<h1>title</h1>
<h2>sub title</h2>

しかし、下記の場合は、h2 は h1 の直接の弟要素ではありません。

<h1>title</h1>
<p>text</p>
<h2>sub title</h2>

間接セレクタ（General sibling combinator）

E ~ F

E という要素の後に出現する F という要素にスタイルを指定します。つまり、E という要素の弟要素が対象になります。CSS3 で定義されました。

さて、いかがでしたか。CSS3 では大幅にセレクタの拡張がされているので、ブラウザに実装されれば余計な class 属性や、id 属性を減らせそうで個人的にはとっても期待大です。

ただし、現状では Working Draft なので、ここから変更される可能性はあります。あと、IE での CSS 実装状態を考えると勧告されてもしばらくは歯がゆい思いをすることになりそうですね。

WWW WATCH