CSS 属性セレクタ
- 前のページ CSS イメージスプライト
- 次のページ CSS フォーム
特定の属性を持つHTML要素のスタイルを設定する
特定の属性や属性値を持つHTML要素のスタイルを設定できます。
CSS [attribute] シレクタ
[attribute] セレクタは指定された属性を持つ要素を選択します。
以下の例では、target属性を持つすべての<a>要素を選択します；
例
a[target] {
background-color: yellow;
}
CSS [attribute="value"] セレクタ
[attribute="value"] セレクタは指定された属性と値を持つ要素を選択します。
以下の例では、target="_blank"属性を持つすべての<a>要素を選択します：
例
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] セレクタ
[attribute~="value"] セレクタは属性値に指定された単語が含まれる要素を選択します。
以下の例では、title属性に"flower"単語が含まれるすべての要素を選択します：
例
[title~="flower"] {
border: 5px solid yellow;
}
上記の例では以下の属性の要素がマッチします：title="flower"、title="summer flower" 以及 title="flower new"、title="my-flower" または title="flowers" ではマッチしません。
CSS [attribute|="value"] セレクタ
[attribute|="value"] セレクタは指定された属性の値が指定された値で始まる要素を選択します。
以下の例では、class属性が"top"で始まるすべての要素を選択します：
注釈：値は完全な単語または単独の単語でなければなりません、例えば class="top" またはハイフンをつける場合、class="top-text"。
例
[class|="top"] {
background: yellow;
}
CSS [attribute^="value"] 選択子
[attribute^="value"]選択子は、指定された属性が指定された値で始まる要素を選択します。
以下の例では、class属性が"top"で始まるすべての要素を選択します：
ヒント：値は完全な単語でなくても構いません！
例
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] 選択子
[attribute$="value"]選択子は、指定された属性が指定された値で終わる要素を選択します。
以下の例では、class属性が"test"で終わるすべての要素を選択します：
ヒント：値は完全な単語でなくても構いません！
例
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] 選択子
[attribute*="value"]選択子は、属性値に指定された単語を含む要素を選択します。
以下の例では、class属性に"te"を含むすべての要素を選択します：
ヒント：値は完全な単語でなくても構いません！
例
[class*="te"] {
background: yellow;
}
フォームのスタイル設定
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;
}
ヒント：私たちの CSSフォームチュートリアル、CSSでフォームのスタイルを設定する方法を学ぶための更多の知識を取得してください。
すべてのCSS属性選択子
| 選択子 | 例 | 例 |
|---|---|---|
| [attribute] | [target] | target属性を持つすべての要素を選択します。 |
| [attribute=value] | [target=_blank] | target属性が"_blank"を持つすべての要素を選択します。 |
| [attribute~=value] | [title~=flower] | title属性に"flower"という単語を含むすべての要素を選択します。 |
| [attribute|=value] | [lang|=en] | lang属性が"en"で始まるすべての要素を選択します。 |
| [attribute^=value] | a[href^="https"] | href属性値が"https"で始まるすべての<a>要素を選択します。 |
| [attribute$=value] | a[href$=".pdf"] | href属性値が".pdf"で終わるすべての<a>要素を選択します。 |
| [attribute*=value] | a[href*="codew3c"] | href 属性値に「codew3c」のサブストリングが含まれる各 <a> 要素を選択します。 |
関連リーディング
课外書：CSS 属性シレクターの詳細
- 前のページ CSS イメージスプライト
- 次のページ CSS フォーム
