属性セレクタ【attribute selector】

概要

属性セレクタ（attribute selector）とは、CSSのセレクタの一つで、要素が特定の属性を持っているか否かや、属性の値に基づいて選択を行うもの。属性の判定条件を [ ] (角括弧)で括って記述する。

Webページの見栄えを記述するCSS（Cascading Style Sheet）では、「セレクタ {スタイル}」という記法を基本とし、セレクタで指定した要素に対してスタイルを適用する。要素を何に基づいて選択するかによっていくつかのセレクタが用意されている。

属性セレクタは「a[title]」のように要素名の後ろに角括弧で括って指定するセレクタで、属性名のみを記述したときは「その属性を持っている要素」という意味になる。この例では「title属性を持つa要素」という意味になる。

また、「input [type="text"]」のように「属性名="値"」という形式で指定することもでき、特定の属性が特定の値になっている要素を指し示す。この例では「input要素のうちtype属性が"text"になっているもの」、すなわちテキストボックスを表している。

他に、「属性名*="値"」で属性の一部に値を含む要素を、「属性名^="値"」で属性が値で始まる要素を、「属性名$="値"」で属性が値で終わる要素を指定することができる。「属性名~="値"」の場合、属性に値が空白区切りで列挙されており、その中の一つに値が一致することを意味する。class属性の一致判定などに用いられる。

(2023.12.25更新)