CSS属性セレクター
特定の属性を持つHTML要素のスタイル
特定の属性または属性値を持つHTML要素のスタイルを設定することができます。
CSS [属性]セレクター
セレクターは、[attribute]指定された属性を持つ要素を選択するために使用されます。
次の例では、ターゲット属性を持つすべての<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属性を持つすべての要素を選択します。そのうちの1つは「flower」です。
例
[title~="flower"] {
border: 5px solid yellow;
}
上記の例では、title = "flower"、title = "summerflower"、title = "flower new"の要素に一致しますが、title = "my-flower"やtitle = "flowers"には一致しません。
CSS [attribute | = "value"]セレクター
セレクターは、指定された属性を持つ要素を選択するために使用されます。[attribute|="value"]その値は、指定された値、または指定された値の後にハイフン（-）を付けることができます。
注：値は、class = "top"のように単独で、またはclass = "top-text"のようにハイフン（-）が後に続く単語全体である必要があります。
例
[class|="top"] {
background: yellow;
}
CSS [attribute ^ = "value"]セレクター
セレクターは、指定された属性を持つ要素を選択するために使用されます。[attribute^="value"]その値は、指定された値で始まります。
次の例では、「top」で始まるクラス属性値を持つすべての要素を選択します。
注：値は単語全体である必要はありません！
例
[class^="top"] {
background: yellow;
}
CSS [attribute $ = "value"]セレクター
セレクターは、[attribute$="value"]属性値が指定された値で終わる要素を選択するために使用されます。
次の例では、「test」で終わるクラス属性値を持つすべての要素を選択します。
注：値は単語全体である必要はありません！
例
[class$="test"] {
background: yellow;
}
CSS [attribute * = "value"]セレクター
セレクターは、[attribute*="value"]属性値に指定された値が含まれている要素を選択するために使用されます。
次の例では、「te」を含むクラス属性値を持つすべての要素を選択します。
注：値は単語全体である必要はありません！
例
[class*="te"] {
background: yellow;
}
スタイリングフォーム
属性セレクターは、クラスまたは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属性セレクター
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |