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

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

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

 CSS 3の草案「Selectors」では、次の3つの属性セレクタが追加され、より細かなマッチングでスタイルシートを適用できるようになっている。

[att*=val]
[att^=val]
[att$=val]

[att*=val]

 セレクタを[att*=val]と指定すると、「val」で指定した語句が属性値に含まれている場合にスタイルシートが適用される。

 たとえば、ソースAでIDに「section1」という語句を含む部分にスタイルシートを適用したい場合、セレクタを[id*=section1]と指定する。これで、

でマークアップした部分を黄色い背景で表示することができる(図3)。

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

 セレクタを[id*=section]と指定すれば、IDに「section」を含むすべての要素にスタイルシートを適用することが可能だ(図4)。

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

[att^=val]

 セレクタを[att^=val]と指定すると、「val」で指定した語句が属性値の最初に含まれている場合にスタイルシートが適用される。

 たとえば、ソースAでIDが「section」で始まる部分にスタイルシートを適用したい場合、セレクタを[id^=section]と指定する。これで、

および
でマークアップした部分を黄色い背景で表示することができる(図5)。

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

[att$=val]

 セレクタを[att$=val]と指定すると、「val」で指定した語句が属性値の最後に含まれている場合にスタイルシートが適用される。

 たとえば、ソースAでIDが「-1」で終わる部分にスタイルシートを適用したい場合、セレクタを[id$=-1]と指定する(図6)。「-(ハイフン)」の前にはエスケープ文字「\」を記述する必要があるので注意したい。

図6 図6
[id$=\-1]{
background-color: yellow;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]