CSS 属性セレクタ

❮ 前章へ 次章へ ❯

指定の属性を持つ HTML 要素のスタイル設定

指定の属性または属性値を持つ HTML 要素にスタイルを設定することが可能です。

CSS [attribute] セレクタ

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

次の例は、target 属性を持つ全ての <a> 要素を選択します：

例

a[target] {
    background-color: yellow;
}
Try it Yourself ❯

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

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

次の例は、target="_blank" 属性を持つ全ての <a> 要素を選択します：

例

a[target="_blank"] {
    background-color: yellow;
}
Try it Yourself ❯

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

[attribute~="value"] セレクタは、指定の単語を含む属性値を持つ要素を選択するために使用します。

次の例は、単語のスペース区切りのリストの 1 つに "flower" を含む title 属性を持つすべての要素を選択します：

例

[title~="flower"] {
    border: 5px solid yellow;
}
Try it Yourself ❯

上の例は、title="flower"、title="summer flower" および title="flower new" を持つ要素にマッチしますが, title="my-flower" または title="flowers" にはマッチしません。

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

[attribute|="value"] セレクタは、指定の属性が、指定した値で始まる属性値を持つ要素を選択するために使用します。

次の例は、"top" で始まる class 属性の値を持つすべての要素を選択します：

注:値は、class="top" のように単独か、または class="top-text" のように後ろにハイフン( - )が続くような形の完全な単語でなければなりません！

例

[class|="top"] {
    background: yellow;
}
Try it Yourself ❯

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

[attribute^="value"] セレクタは、属性値が指定した値で始まる要素を選択するために使用します。

次の例は、"top" で始まる class 属性の値を持つすべての要素を選択します：

注:値は、完全な単語である必要はありません！

例

[class^="top"] {
    background: yellow;
}
Try it Yourself ❯

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

[attribute$="value"] セレクタは、属性値が指定した値で終わる要素を選択するために使用します。

次の例は、"test" で終る class 属性の値を持つすべての要素を選択します：

注:値は、完全な単語である必要はありません！

例

[class$="test"] {
    background: yellow;
}
Try it Yourself ❯

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

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

次の例は、"te" を含む class 属性の値を持つすべての要素を選択します：

注:値は、完全な単語である必要はありません！

例

[class*="te"] {
    background: yellow;
}
Try it Yourself ❯

フォームのスタイル

属性セレクタは、クラスや ID を使用せずにフォームのスタイルを設定するのに便利です:

例

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

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

チップ: CSS でフォームをスタイルする方法の例については、 CSS フォーム・チュートリアル をご覧ください。

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯  Exercise 4 ❯  Exercise 5 ❯  Exercise 6 ❯

CSS セレクタのその他の例More Examples of CSS Selectors

いろいろなセレクタの実証には、CSSセレクタ・テスタを使用してください。

すべての CSS セレクタの完全なリファレンスについては、 CSS セレクタリ・ファレンスをご覧ください。


❮ 前章へ 次章へ ❯