第11回　CSS3はここがすごい【セレクタ編1】テーブルレイアウトを卒業しよう

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がどうなるかはちょっと不明です。「段落の親要素の背景色との関係を考えた配色」を指定できたりすれば面白いと思うんですが、どうなるでしょう。

DreamweaverでCSSの使い方を習得: スタイルシートの書き方から使い方、ブラウザーごとの動きの差まで、ページレイアウト手法を習得します。; Dreamweaver CS5 CSSデザイン手法

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

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

では次回もお楽しみに。（こう）

関連リンク