前回の続きです。今回も引き続き、CSS3 で定義予定のものも含めて、CSS セレクタのリファレンスいきます。
今回は擬似クラスを中心に取り上げてみますが、CSS3 では擬似クラスが大幅に拡張されていますので、見慣れないものばかりかと思いますが、知っておくといいかもしれません。ただし、ブラウザのサポートはまだまだですので、実用性は高くないと思います。
擬似クラス (Structural pseudo-classes)
E:root
ドキュメント内のルート要素である E という要素にスタイルを指定します。CSS3 で定義。(X)HTML においては、ルート要素は html 要素になるので、
:root {
margin:0;
padding:0;
}
とすれば html 要素にスタイルが適用されます。XML の場合は、DTD で指定されたルート要素に対して適用されます。
E:nth-child(n)
E という要素のうち、その親要素の n 番目の子要素である E 要素にスタイルを指定します。CSS3 で定義されました。
div p:nth-child(3) {
margin:0;
padding:0;
}
とすれば、div 要素内で、3番目の子要素として出現する p 要素にのみスタイルが指定されます。また、
div p:nth-child(odd) {
margin:0;
padding:0;
}
として、奇数番目に出現する要素を指定したり、同じく even を n に入れて偶数番目のみを対称にしたりもできます。
他にも 2n+1 など、an+b という記述も可能で、a と b に整数を入れると、n には 0 から順番に整数が代入されて計算されていきます。つまり、2n+1 であれば、奇数 （odd） と同じであり、2n+0 であれば、偶数 （even） と同様です。ちなみに、+0 は省略しても同じですので、実際は、2n と記述します。
div p:nth-child(odd) /* div 内の奇数番目の子要素である p 要素に適用 */
div p:nth-child(2n+1) /* 同上 */
div p:nth-child(even) /* div 内の偶数番目の子要素である p 要素に適用 */
div p:nth-child(2n) /* 同上 */
/* 下記のように書けば、4色を順番に繰り返し */
div p:nth-child(4n+1) { color:navy;}
div p:nth-child(4n+2) { color:green;}
div p:nth-child(4n+3) { color:maroon;}
div p:nth-child(4n+4) { color:purple;}
この記述は、下記の擬似クラスに出てくる n にも同様に使用できます。
E:nth-last-child(n)
E という要素のうち、その親要素の最後から数えて n 番目の子要素である E 要素にスタイルを指定します。CSS3 で定義されました。
div p:nth-last-child(1) {
margin:0;
padding:0;
}
とすれば、div 要素内で、一番最後の子要素として出現する p 要素にのみスタイルが指定されます。
E:nth-of-type(n)
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で n 番目に出現する E 要素にスタイルを指定します。CSS3 で定義されました。
div p:nth-of-type(5) {
margin:0;
padding:0;
}
とすれば、div 要素内で兄弟関係にある p 要素の中で、5番目に出現する p 要素にのみスタイルが指定されます。
E:nth-last-of-type(n)
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最後から数えて n 番目に出現する E 要素にスタイルを指定します。CSS3 で定義されました。
div p:nth-last-of-type(3) {
margin:0;
padding:0;
}
とすれば、div 要素内で兄弟関係にある p 要素の中で、最後から 3番目に出現する p 要素にのみスタイルが指定されます。
E:first-child
E という要素のうち、その親要素の最初の子要素である E 要素にスタイルを指定します。CSS2 で定義されました。
div p:first-child {
margin:0;
padding:0;
}
E:last-child
E という要素のうち、その親要素の最後の子要素である E 要素にスタイルを指定します。CSS3 で定義されました。
div p:last-child {
margin:0;
padding:0;
}
E:first-of-type
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最初に出現する E 要素にスタイルを指定します。CSS3 で定義されました。
div p:first-of-type {
margin:0;
padding:0;
}
とすれば、div 要素内で兄弟関係にある p 要素の中で、最初に出現する p 要素にのみスタイルが指定されます。
E:last-of-type
E という要素のうち、その親要素内で同列 （兄弟関係） の E と同じ名前を持つ要素で最後に出現する E 要素にスタイルを指定します。CSS3 で定義されました。
div p:last-of-type {
margin:0;
padding:0;
}
とすれば、div 要素内で兄弟関係にある p 要素の中で、最後に出現する p 要素にのみスタイルが指定されます。
E:only-child
E という要素のうち、その親要素内で唯一の子要素である （兄弟を持たない） E 要素にスタイルを指定します。CSS3 で定義されました。
E:only-of-type
E という要素のうち、その親要素内で唯一の E 要素にスタイルを指定します。CSS3 で定義されました。
E:empty
E という要素のうち、子要素 （テキストノードも含めて） をまったく持たない E 要素にのみスタイルを適用します。CSS3 で定義されました。
リンク擬似クラス (The link pseudo-classes)
E:link / E:visited
文書内のハイパーリンクのうち、ユーザーがまだ訪れていないリンクか (:link) 、又は訪問済みリンクか (:visited) によって、それぞれにスタイルを指定します。これはおなじみなので特に説明の必要もないですね。CSS1 から存在します。
ダイナミック擬似クラス (The user action pseudo-classes)
E:active / E:hover / E:focus
ユーザーの操作に合わせてスタイルを指定します。:active はユーザーによって対象要素がアクティブにされた時。例えばマウスでクリックしてボタンを離した時などですね。
:hover はユーザーによって対象要素が指し示されている時。マウスカーソルなどが重ねられた時など。この 2つは CSS1 から存在する古株ですのでいまさら説明も不要でしょう。
:focus は対象要素がフォーカスされている状態でのスタイルを指定します。例えば、入力待ちになっている input 要素など。:focus は CSS2 で定義されました。
ターゲット擬似クラス (The target pseudo-class)
E:target
ハイパーリンクのうち、URI にアンカーリンクが指定されているリンクをアクティブにした際、そのターゲットとなる要素に対してスタイルを指定します。アンカーリンクとは
http://example.com/example.html#section_3
のようにフラグメント識別子で URI が終わるリンクですね。
*:target {
padding-right:15px;
background:(image/target-icon.png) no-repeat right center;
}
これでフラグメント識別子付きリンクをクリックした際、そのターゲット要素に対して、アイコンを付けるといったことが可能です。フラグメント識別子付きリンクで移動した際に、どこをターゲットに飛んだのかを分かりやすくするなどの用途で使用できます。CSS3 で定義されています。
言語擬似クラス (The :lang() pseudo-class)
E:lang(fr)
E という要素のうち、言語が fr である要素を対象にします。マッチングは前方一致です。CSS2 で定義されています。
p:lang(en) {
padding-right:15px;
background:(image/en-icon.png) no-repeat right center;
}
のように指定すれば、
<p lang="en-US">english text</p>
あるいは、
<blockquote lang="en"> <p>This attribute specifies the base language of an element's attribute values and text content. The default value of this attribute is unknown.</p> </blockquote>
などと記述された p 要素にのみスタイルを設定することができます。
UI 要素状態擬似クラス (The UI element states pseudo-classes)
E:enabled / E:disabled
E という要素のうち、有効なもの （:enabled）、無効なもの （:disabled） に対してそれぞれスタイルを指定します。これ、なかなか使いどころが難しいのですが、例えば textarea 要素などは通常フォーカスれば入力可能 （アクティブ） になりますので、有効な要素ということになります。何らかの理由で、ユーザーがフォーカスしても入力ができない （アクティブにできない） textarea があれば、その要素は無効ということになります。CSS3 で定義。
E:checked
ラジオボタン、チェックボックスがチェックされた状態のときにスタイルを指定します。CSS3 で定義。
さて、今回は CSS3 で初お目見えしたセレクタが多かったので、あまり馴染みのないものばかりだったかもしれません。ただ、実装されればかなり便利なセレクタも多いので、期待したいところです。
次回は最後、擬似要素あたりをまとめます。
