CSS入門 | CSSセレクター | 属性セレクター

Tags:

属性セレクター

属性セレクターを使うと、特定の属性や特定の属性値を持つHTML要素を選択できる。

基本属性セレクター

CSSで使用できる基本属性セレクターは次のとおりである。

  • [属性名]セレクター
  • [属性名="属性値"]セレクター

[属性名]セレクター

構文

[属性名]

[属性名]セレクターは、特定の属性を持つ要素をすべて選択する。

<style>
    [title] { background: black; color: yellow; }
</style>

[属性名="属性値"]セレクター

構文

[属性名="属性値"]

[属性名="属性値"]セレクターは、特定の属性を持ち、その属性値まで一致する要素をすべて選択する。

<style>
    [title="first h2"] { background: black; color: yellow; }
</style>

文字列属性セレクター

CSSでは、基本属性セレクター以外にも文字列属性セレクターを提供する。 文字列属性セレクターは、HTML要素が持つ特定属性の値の中に特定文字列があるかを確認して選択する。

CSSで使用できる文字列属性セレクターは次のとおりである。

  • [属性名~="属性値"]セレクター
  • [属性名|="属性値"]セレクター
  • [属性名^="属性値"]セレクター
  • [属性名$="属性値"]セレクター
  • [属性名*="属性値"]セレクター

Internet Explorer 8以前では、HTML文書に<!DOCTYPE html>タグが挿入されている必要があり、そうすると文字列属性セレクターを正しく認識する。

[属性名~="属性値"]セレクター

構文

[属性名~="属性値"]

[属性名~="属性値"]セレクターは、特定属性の値に特定文字列で構成された1つの単語を含む要素をすべて選択する。

<style>
    [title~="first"] { background: black; color: yellow; }
</style>

上の例では、title属性値が"first h2"である要素と"first p"である要素だけが選択される。 title属性値が"first-p"である要素は選択されない。

このように、[属性名~="属性値"]セレクターは、title属性値が正確に"first"である要素、または空白を基準に認識される単語に"first"を含む要素だけを選択する。

[属性名~="属性値"]セレクターは、空白を基準に単語を認識する。 したがって、例のようにハイフン(-)でつながった単語はすべて1つの単語として認識され、別々の単語としては認識されない。

[属性名|="属性値"]セレクター

構文

[属性名|="属性値"]

[属性名|="属性値"]セレクターは、特定属性の値が特定文字列で構成された1つの単語で始まる要素をすべて選択する。

<style>
    [title|="first"] { background: black; color: yellow; }
</style>

上の例では、title属性値が"first-p"である要素だけが選択される。 title属性値が"first h2"や"first p"である要素は選択されない。

このように、[属性名|="属性値"]セレクターは、title属性値が正確に"first"である要素、または"first"の直後にハイフン(-)で始まる要素だけを選択する。

[属性名^="属性値"]セレクター

構文

[属性名^="属性値"]

[属性名^="属性値"]セレクターは、特定属性の値が特定文字列で始まる要素をすべて選択する。

<style>
    [title^="first"] { background: black; color: yellow; }
</style>

このセレクターは[属性名|="属性値"]セレクターとは異なり、属性値が特定文字列で始まればすべて選択する。 したがって、上の例ではtitle属性値が"first"で始まる要素がすべて選択される。

[属性名$="属性値"]セレクター

構文

[属性名$="属性値"]

[属性名$="属性値"]セレクターは、特定属性の値が特定文字列で終わる要素をすべて選択する。

<style>
    [title$="first"] { background: black; color: yellow; }
</style>

このセレクターは、特定属性の値が特定文字列で終わりさえすれば、すべて選択する。 したがって、上の例ではtitle属性値が"first"で終わる要素がすべて選択される。

[属性名*="属性値"]セレクター

構文

[属性名*="属性値"]

[属性名*="属性値"]セレクターは、特定属性の値に特定文字列を含む要素をすべて選択する。

<style>
    [title*="first"] { background: black; color: yellow; }
</style>

このセレクターは、特定属性の値が特定文字列を含みさえすれば、すべて選択する。 したがって、上の例ではtitle属性値に"first"を含む要素がすべて選択される。

属性セレクターの活用

上で説明した属性セレクターを活用すると、classやIDを指定しなくても、スタイルを適用するHTML要素を簡単に選択できる。

<style>
    input[type="text"] { width: 150px; display: block; background-color: #FFEFD5; margin-bottom: 10px; }
    input[type="password"] { width: 130px; display: block; background-color: #90EE90; border: solid 2px red; }
    input[type="password"]:focus { background-color: #FFC0CB; }
</style>