CSS属性セレクタ_ダイナミックノードJavaアカデミー整理

指定した属性を持つHTML要素のスタイルを設定します.
classおよびid属性に限らず、指定した属性を持つHTML要素のスタイルを設定できます.
注:决まってるだけ!DOCTYPEの場合、IE 7とIE 8はプロパティセレクタをサポートしません.IE 6以降では、属性選択はサポートされていません.
属性セレクタ
次の例では、titleプロパティを持つすべての要素のスタイルを設定します.

[title]
{
color:red;
}

属性と値セレクタ
次の例では、title="W 3 School"のすべての要素のスタイルを設定します.

[title=W3School]
{
border:5px solid blue;
}

属性と値セレクタ-複数の値
次の例では、指定した値を含むtitleプロパティのすべての要素にスタイルを設定します.スペースで区切られた属性値に適用されます.

[title~=hello] { color:red; }

次の例では、指定した値を含むlangプロパティを持つすべての要素のスタイルを設定します.ハイフンで区切られた属性値に適用されます.

[lang|=en] { color:red; }

フォームのスタイルの設定
プロパティ・セレクタは、classまたはidを持たないフォームのスタイルを設定するときに特に役立ちます.

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}
input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

CSSセレクタリファレンスマニュアル
セレクタ
説明
[attribute]
指定した属性を持つ要素を選択できます.
[attribute=value]
指定した属性と値を持つ要素を選択します.
[attribute~=value]
属性値に指定した語彙を含む要素を選択します.
[attribute|=value]
指定した値で始まる属性値を持つ要素を選択します.この値は単語全体でなければなりません.
[attribute^=value]
属性値を一致させて、値の先頭にある各要素を指定します.
[attribute$=value]
属性値を一致させて、値の末尾にある各要素を指定します.
[attribute*=value]
一致属性値には、指定した値の各要素が含まれます.