CSS 属性セレクタ

1. CSS [attribute] セレクタ

[attribute] セレクタは、特定の属性を持つ要素を選択するために使用されます。

以下の例では、target 属性を持つすべての <a> 要素を選択しています：

/* target 属性を持つすべての a 要素をターゲットにする */
a[target] {
  background-color: yellow;
}

2. CSS [attribute="value"] セレクタ

[attribute="value"] セレクタは、特定の属性と値を持つ要素を選択するために使用されます。

以下の例では、target="_blank" 属性を持つすべての <a> 要素を選択しています：

/* target="_blank" 属性を持つすべての a 要素をターゲットにする */
a[target="_blank"] {
  background-color: yellow;
}

3. CSS [attribute~="value"] セレクタ

[attribute~="value"] セレクタは、属性値に指定された単語が含まれている要素を選択するために使用されます。

以下の例では、空白で区切られたリストの中に "flower" という単語を含む title 属性を持つすべての要素を選択しています：

/* title 属性に "flower" という単語が含まれるすべての要素をターゲットにする */
[title~="flower"] {
  border: 5px solid yellow;
}

上記の例は、title="flower"、title="summer flower"、title="flower-bud" にはマッチしますが、title="my-flower" や title="flowers" にはマッチしません。

4. CSS [attribute|="value"] セレクタ

[attribute|="value"] セレクタは、指定された値で始まる属性を持つ要素を選択するために使用されます。値は単語全体である必要があり、単独の単語（class="top"）またはハイフン（-）で始まる形式（class="top-text"）である必要があります。

/* class 属性の値が "top" で始まるすべての要素をターゲットにする */
[class|="top"] {
  background: yellow;
}

       注意： このセレクタは主に言語コード（例：lang="en", lang="en-us"）をターゲットにする際に使用されます。

5. CSS [attribute^="value"] セレクタ

[attribute^="value"] セレクタは、属性値が指定された値で始まる要素を選択するために使用されます。値が単語全体である必要はありません。

以下の例では、class 属性の値が "top" で始まるすべての要素を選択しています：

/* class 属性の値が "top" から始まるすべての要素をターゲットにする */
[class^="top"] {
  background: yellow;
}

6. CSS [attribute$="value"] セレクタ

[attribute$="value"] セレクタは、属性値が指定された値で終わる要素を選択するために使用されます。値が単語全体である必要はありません。

以下の例では、class 属性の値が "test" で終わるすべての要素を選択しています：

/* class 属性の値が "test" で終わるすべての要素をターゲットにする */
[class$="test"] {
  background: yellow;
}

7. CSS [attribute*="value"] セレクタ

[attribute*="value"] セレクタは、属性値に指定された文字列が含まれている要素を選択するために使用されます。値が単語全体である必要はありません。

以下の例では、class 属性の値に "te" が含まれるすべての要素を選択しています：

/* class 属性の値に "te" が含まれるすべての要素をターゲットにする */
[class*="te"] {
  background: yellow;
}

8. フォームのスタイリング (Styling Forms)

属性セレクタは、class や id を持たないフォーム要素をスタイリングする際に非常に便利です。

input[type="text"] {
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {
  width: 120px;
  margin-left: 35px;
  display: block;
}

9. すべての CSS 属性セレクタの一覧