CSS3はここがすごい【セレクタ編1】：CSS 3分コーディング

CSS（スタイルシート）の色々なテクニックや知識を紹介していく「CSS 3分コーディング」のコーナーです。

はじまりはじまり。

CSS3はここがすごい【セレクタ編1】

今回はW3C Working Draftの中から新しく定義される予定のCSS3新セレクタについてご紹介します。続くかもしれません。

属性セレクタ

E[foo^="bar"]
/*
E…要素
foo…属性
bar…値
*/

「^（アクサンシルコンフレックス）」記号を使用することで、foo属性が"bar"という文字列から始まるE要素を指定することができます。たとえば、こんな使い方。

<a href="http:...">外部リンク</a>

a[href^="http:"]::before{
	content: url(/img/link.gif);
	margin-right: 4px;
}

href属性が"http:"という値で始まる場合に、ハイパーリンクの前にアイコンを表示することができます。セレクタ1つで一括でいけるのでとても楽ですね。

上のセレクタと逆がこれ。

E[foo$="bar"]
/*
E…要素
foo…属性
bar…値
*/

「$（ドル）」記号を使用することで、foo属性が"bar"という文字列で終わるE要素を指定することができます。たとえば、こんな使い方。さっきと逆なだけですが…。

<a href="info.pdf">PDFファイルを表示します</a>

a[href$=".pdf"]::before{
	content: url(/img/pdf.gif);
	margin-right: 4px;
}

href属性が".pdf"という値で終わる場合に、ハイパーリンクの前にアイコンを表示することができます。セレクタ1つで一括でいけるので（略

最後がこちら。

E[foo*="bar"]
/*
E…要素
foo…属性
bar…値
*/

「*（アスタリスク）」記号を使用することで、foo属性が"bar"という文字列を含むE要素を指定することができます。上の2つほどコレだ！という使い方はすぐに思い浮かびませんが、ID名やクラス名に一工夫いれたりすると多分とても便利だと思います。

疑似要素

E::selection
/*
E…要素
*/

マウスカーソルでドラッグして選択された範囲を指定することができます。…が、最新のW3C Working Draftからは消えてしまいました…。たとえば、こんな使い方。

<p>Lorem ipsum dolor sit amet, consectetur adipisicing...</p>

p::selection {
	background:#F00;
	color:#FFF;
}

選択するとこうなります。

CSS3 selection疑似要素

background-imageの指定は無視されるようです。また、今後::selectionがどうなるかはちょっと不明です。「段落の親要素の背景色との関係を考えた配色」を指定できたりすれば面白いと思うんですが、どうなるでしょう。

ちなみに、疑似要素はこれまで「:（コロン）」1つでOKでしたが、「::」2つで正式な記述方法になるようです。

次も、もう少しセレクタの話を続けたいと思います。

では次回もお楽しみに。