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

エ・ビスコム・テック・ラボ
2009-02-03 15:33:01
  • このエントリーをはてなブックマークに追加

属性セレクタとは

 ウェブページでは、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で追加された属性セレクタ

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]