属性セレクタ指定した属性や値を持つ要素にスタイルを適用する
属性セレクタは、要素名に続けてブラケット([ ])で囲んだ属性名や値を記述することで、指定した属性、あるいは値を持つ要素を対象にスタイルを適用します。
様々な指定方法がありますので、詳しくはサンプルソースを確認してください。
属性セレクタのサンプルソース
/* type 属性をもつ input 要素にスタイルを適用しています */ input[type] { outline: solid 2px gray; } /* rel="external" をもつ a 要素にスタイルを適用しています */ a[rel="external"] { padding-right: 15px; background: url(image/external-icon.png) no-repeat right center; }
/* class 属性に foo を含む値をもつ p 要素にスタイルを適用しています */ p[class~="foo"] { margin: 0; padding: 0; }
/* href 属性に https から始まる値をもつ a 要素にスタイルを適用しています */ a[href^="https"] { background: yellow; } /* href 属性に .pdf で終わる値をもつ a 要素にスタイルを適用しています */ a[href$=".pdf"] { padding-right: 15px; background: url(image/pdf-icon.png) no-repeat right center; } /* href 属性に hyper-text を含む値をもつ a 要素にスタイルを適用しています */ a[href*="hyper-text"] { font-weight: bold; }
/* hreflang 属性に、指定した文字列、または「指定した文字列-」で始まる値を持つ a 要素にスタイルを適用しています */ a[hreflang|="en"] { padding-right: 15px; font-style: italic; }
主要ブラウザの対応
IE11 | ○ |
---|---|
Edge(EdgeHTML) | ○ |
Edge(Chromium) | ○ |
Chrome | ○ |
Firefox | ○ |
Safari | ○ |
iOS Safari | ○ |
Android Chrome | ○ |