CSS 属性セレクター
特定の属性を持つHTML要素のスタイル設定
特定の属性または属性値を持つHTML要素のスタイルを設定できます。
CSS [attribute]セレクター
[attribute]セレクターは、指定された属性を持つ要素を選択するために使用されます。
次の例では、target 属性を持つすべての<a>要素を選択します。
CSS [attribute="value"] セレクター
[attribute="value"]セレクターは、指定された属性と値を持つ要素を選択するために使用されます。
次の例では、target="_blank"属性を持つすべての<a>要素を選択します。
CSS [attribute~="value"] セレクター
[attribute~="value"]セレクターは、指定された単語を含む属性値を持つ要素を選択するために使用されます。
次の例では、スペースで区切られた単語のリストを含むtitle属性を持つすべての要素を選択します。そのうちの1つは「flower」です。
上記の例は、title="flower"、title="summer flower"、title="flower new"の要素に一致しますが、title="my-flower"やtitle="flowers"には一致しません。
CSS [attribute|="value"] セレクター
[attribute|="value"]セレクターは、指定された属性を持つ要素を選択するために使用されます。その値は、指定された値と正確に一致するか、指定された値の後にハイフン(-)が続きます。
注：値は、class="top"のように単独で、またはclass="top-text"のようにハイフン( - )が続く単語全体である必要があります。
CSS [attribute^="value"] セレクター
[attribute^="value"]セレクターは、値が指定された値で始まる、指定された属性を持つ要素を選択するために使用されます。
次の例では、class属性値が「top」で始まるすべての要素を選択します。
注：値は単語全体である必要はありません!
CSS [attribute$="value"]セレクター
[attribute$="value"]セレクターは、属性値が指定された値で終わる要素を選択するために使用されます。
次の例では、class 属性値が「test」で終わるすべての要素を選択します。
注：値は単語全体である必要はありません!
CSS [attribute*="value"] セレクター
[attribute*="value"]セレクターは、属性値に指定された値が含まれる要素を選択するために使用されます。
次の例では、「te」を含むクラス属性値を持つすべての要素を選択します。
注：値は単語全体である必要はありません!
フォームのスタイリング
属性セレクターは、クラスや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"] | 「flower」という単語を含む title 属性を持つすべての要素を選択します。 |
| [attribute|=value] | [lang|="en"] | 「en」で始まる lang 属性値を持つすべての要素を選択します。 |
| [attribute^=value] | a[href^="https"] | href 属性値が「https」で始まるすべての <a> 要素を選択します。 |
| [attribute$=value] | a[href$=".pdf"] | href 属性値が「.pdf」で終わるすべての <a> 要素を選択します。 |
| [attribute*=value] | a[href*="techis.jp/guide"] | href 属性値に部分文字列 "techis.jp/guide" が含まれるすべての <a> 要素を選択します。 |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。