CSS 3のセレクタ解説：属性セレクタ

エ・ビスコム・テック・ラボ
2009-02-03 15:33:01
今回はCSS 3で新しく追加された属性セレクタを紹介したい。属性セレクタへのブラウザの対応は進んでおり、Firefox、Safari、Google Chrome、Operaといったブラウザはもちろん、Internet Explorerもバージョン7から対応している。
最新特集【一覧】

EPUB生成ツール「ReVIEW」について達人出版会の高橋氏に聞いてみた

1つのソースでEPUBとPDFを生成できる「ReVIEW」を試す

Snow Leopard探索記 最終回：線路は続くよどこまでも

属性セレクタとは

　ウェブページでは、HTMLおよびXHTMLタグに属性を追加してさまざまな情報を付加することができる。たとえば、id属性を利用すれば

でマークアップした部分に、任意のIDを指定することができる。次のサンプルでは「section1」というIDを指定して、
でマークアップした部分をそれぞれ区別して扱えるようにしている。

　なお、HTMLとXHTMLタグに指定できる属性は、W3CのHTMLやXHTMLの標準規格で定義されており、どの定義を利用するかは1行目のDOCTYPE宣言で指定する。ここでは、XHTML 1.0の定義を利用するように指定している。

ソースA


…略…



テキスト1


テキスト1-1


テキスト1-2




テキスト2


テキスト2-1


テキスト2-2

　画面表示は図1のようになる。id属性を指定しただけでは、画面表示には影響しない。

図1 図1
※ブラウザで表示を確認する

　これに対して属性セレクタを利用すると、特定の属性や属性値を持つ要素に対してスタイルシートを適用することができる。最も基本的な属性セレクタはCSS 2で定義されており、

[att=val]

　という形で記述し、「att」には属性名を、「val」には属性値を指定する。たとえば、先ほどのソースAでIDを「section1」と指定した部分にスタイルシートを適用するには、セレクタを[id=section1]と指定する。これで、

でマークアップした部分だけを黄色い背景で表示することができる（図2）。

図2 図2 
[id=section1]{
background-color: yellow;
}
※ブラウザで表示を確認する

CSS 3で追加された属性セレクタ

  • 新着記事
  • 特集
  • ブログ