特定の属性を持つスタイルHTML要素
特定の属性または属性値を持つHTML要素をスタイルすることが可能です。
CSS [属性]セレクター
[attribute]セレクタは、指定された属性を持つ要素を選択するために使用されます。
次の例では、すべての選択<a>ターゲット属性を持つ要素を：
CSS [属性= "値"]セレクタ
[attribute="value"]セレクタは、指定された属性と値を持つ要素を選択するために使用されます。
次の例では、すべての選択<a>で要素をtarget="_blank"属性：
CSS [属性〜= "値"]セレクタ
[attribute~="value"]セレクタは、指定されたワードを含む属性値を持つ要素を選択するために使用されます。
次の例では、「そのうちの1つの単語のスペース区切りのリストが含まれているtitle属性を持つすべての要素、選択flower 」：
上記の例では、との要素と一致しますtitle="flower", title="summer flower" 、そしてtitle="flower new"ではなく、 title="my-flower"やtitle="flowers" 。
CSS [属性| = "値"]セレクタ
[attribute|="value"]セレクタは、指定した値で始まる指定された属性を持つ要素を選択するために使用されます。
次の例は、で始まるクラス属性値を持つすべての要素を選択し、 "top" ：
注：値は次のように、いずれか単独、単語全体でなければならないclass="top" 、またはハイフン( - )のようなclass="top-text" ！
CSS [属性^ = "値"]セレクタ
[attribute^="value"]セレクタは、属性値が指定した値で始まる要素を選択するために使用されます。
次の例は、で始まるクラス属性値を持つすべての要素を選択し、 "top" ：
注：値は、単語全体である必要はありません！
CSS [属性$ = "値"]セレクタ
[attribute$="value"]セレクタは、属性値が指定した値で終わる要素を選択するために使用されます。
次の例は、で終わるクラス属性値を持つすべての要素を選択し、 "test" ：
注：値は、単語全体である必要はありません！
CSS [属性* = "値"]セレクタ
[attribute*="value"]セレクタは、属性値が指定した値が含まれている要素を選択するために使用されます。
次の例では、含まれているクラス属性値を持つすべての要素を選択し、 "te" ：
注：値は、単語全体である必要はありません！
スタイリングフォーム
属性セレクタはせずにスタイリングフォームのために有用であることができる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セレクタのその他の例
私たちの使用CSSセレクタテスターを異なるセレクタを実証します。
すべてのCSSセレクタの完全なリファレンスについては、当社をご覧くださいCSSセレクタリファレンス 。