目次
属性セレクタ
ある属性を持つ要素
ある属性を持つ要素を対象にスタイルを適用します。
属性値はなんでもOKです。
書式
要素名[属性名] {プロパティ名:値;}
使用例
CSS
a[title] {background-color:yellow;}
- 上記は、
title属性を持っているa要素に対して、スタイルが適用されます。
参考
ある属性に指定値を持つ要素〔完全一致〕
ある属性に指定の値を持つ要素を対象にスタイルを適用します。
書式
要素名[属性名="属性値"] {プロパティ名:値;}
使用例
CSS
a[target="_blank"] {color:blue;}
- 上記は、
target属性に_blankという値が指定されているa要素に対して、スタイルが適用されます。
参考
ある属性の候補値を持つ要素〔候補値に一致〕
ある属性が指定の候補値を持つ要素を対象にスタイルを適用します。
書式
要素名[属性名~="属性候補値1 属性候補値2 ..."] {プロパティ名:値;}
HTMLでは、以下のように属性値をスペースで区切って複数指定することが可能です。
HTML
<a class="info other">...</a>
infoとotherがclass属性の候補値となります。
使用例
HTML
<a class="info">...</a> <a class="other info">...</a> <a class="info other">...</a> <a class="other info extra">...</a> <a class="otherinfo">...</a> <a class="infoother">...</a>
CSS
a[class="info"] {color:blue;}
- 上記は、
class属性にinfoという候補値を持つa要素に対して、スタイルが適用されます。 - 上記のHTMLの場合だと、
info,info other,other info,other info extraの4つのa要素にはスタイルが適用されますが、
otherinfoとinfootherにはスタイルが適用されません。
参考
ある属性が指定値で始まる要素〔前方一致〕(CSS3)
ある属性の値が指定値で始まる要素を対象にスタイルを適用します。
こちらはCSS3から利用可能です。
書式
要素名[属性名^="属性値"] {プロパティ名:値;}
使用例
CSS
a[href^="#"] {font-size:10px; background-color:#6699FF;}
- 上記は、
href属性が#で始まるa要素に対して、スタイルが適用されます。
参考
ある属性が指定値で終わる要素〔後方一致〕(CSS3)
ある属性の値が指定値で終わる要素を対象にスタイルを適用します。
こちらはCSS3から利用可能です。
書式
要素名[属性名$="属性値"] {プロパティ名:値;}
使用例
CSS
a[href$=".jpg"] {font-size:30px; background-color:#66FFCC;}
- 上記は、
href属性が.jpgで終わるa要素に対して、スタイルが適用されます。
参考
ある属性が指定値を含む要素〔部分一致〕(CSS3)
ある属性の値が指定値を含む要素を対象にスタイルを適用します。
こちらはCSS3から利用可能です。
書式
要素名[属性名*="属性値"] {プロパティ名:値;}
使用例
CSS
a[href*="thinktwice.tech"] {font-size:20px; background-color:#FF9999;}
- 上記は、
href属性にthinktwice.techを含むa要素に対して、スタイルが適用されます。
参考
参考
参考サイト
- (HTML クイック・リファレンス) セレクタの種類－CSSの基本
- (HTML クイック・リファレンス) 属性セレクタ …… 特定の属性を持つ指定要素にスタイルを適用する
- (HTML クイック・リファレンス) 属性（値）セレクタ …… 特定の属性（値）を持つ指定要素にスタイルを適用する
- (HTML クイック・リファレンス) 属性（値候補）セレクタ …… 属性値候補と一致した場合にスタイルを適用する
- (HTML クイック・リファレンス) E[foo^="bar"] …… foo属性の値がbarで始まるE要素
- (HTML クイック・リファレンス) E[foo$="bar"] …… foo属性の値がbarで終わるE要素
- (HTML クイック・リファレンス) E[foo*="bar"] …… foo属性の値にbarを含むE要素