CSS Reference

属性セレクタ

指定した属性や値を持つ要素にスタイルを適用する

属性セレクタは、要素名に続けてブラケット（[ ]）で囲んだ属性名や値を記述することで、指定した属性、あるいは値を持つ要素を対象にスタイルを適用します。

様々な指定方法がありますので、詳しくはサンプルソースを確認してください。

属性セレクタのサンプルソース

/* 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 ○

関連するセレクタ

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome