属性セレクタ指定した属性や値を持つ要素にスタイルを適用する
属性セレクタは、要素名に続けてブラケット（[ ]）で囲んだ属性名や値を記述することで、指定した属性、あるいは値を持つ要素を対象にスタイルを適用します。
様々な指定方法がありますので、詳しくはサンプルソースを確認してください。
属性セレクタのサンプルソース
/* 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 | ○ |