< h2 id ="first-title" class ="magical" rel ="friend" > David Walsh </ h2 >
この1つの要素には、ID、クラス、およびrelという3つの属性があります。 IDセレクター（＃first-title）とクラスセレクター（.magical）を使用して、CSSの要素を選択できます。 しかし、rel属性を使用して選択できることを知っていましたか？ これは、いわゆる属性セレクターです。
h2[rel=friend] {
/* woohoo! */
}
多くの属性セレクタがあります。すべての可能なオプションを検討するのではなく、現実の世界で遭遇する最も有用なシナリオを検討します。
[rel = external]-属性値の完全一致
上記の例では、h2要素に値「friend」を持つ属性を使用しました。 rel属性の値が「friend」であるため、作成したCSSセレクターはh2要素を対象としています。 つまり、等号は完全一致を意味します。 他の例を考えてみましょう。
< h1 rel ="external" > Attribute Equals </ h1 >
h1[rel=external] { color: red; }
より現実的な例は、ブログのリストのスタイル設定です。 たとえば、友人のサイトへのリンクのリストがあります。
< a href ="http://perishablepress.com" > Jeff Starr </ a >
< a href ="http://davidwalsh.name" > David Walsh </ a >
< a href ="http://accidentalninja.net/" > Richard Felix </ a >
リンクごとに異なるスタイルを作成します。 従来の方法は各リンクにクラス名を付けることですが、これには追加のマークアップが必要であり、これは常に（セマンティクスなどのために）良いとは限りません。 別の方法は、nth-childを使用することですが、これにはリストの順序を変更する必要がありません。 この場合、理想的な解決策は属性セレクターを使用することです...リンクには既に一意の属性があります。
a[href=http://perishablepress.com] { color: red; }
ほとんどの場合、属性セレクターは入力要素に使用されます。 これらは、テキスト、ボタン、チェックボックス、ファイル、非表示、画像、パスワード、ラジオ、リセット、送信です。 これらはすべて
<input/>
要素であり、すべて非常に異なっています。 したがって、
input {padding: 10px;}
ような処理を行うことは、ほとんどの場合悪い考えです。 したがって、非常に多くの場合、次のようなものが表示されます。
input[type=text] { padding: 3px; }
input[type=radio] { float: left; }
これは、余分なマークアップを追加せずにさまざまなタイプの入力を取得する唯一の方法です。
[rel * = external]-属性にはどこかに値が含まれています
これは、より興味深いものになります。 属性セレクターの等号の前には、値を変更する他の文字が続く場合があります。 たとえば、「* =」は、属性値の任意の場所で検索値を見つけることを意味します。 例を見てみましょう：
< h1 rel ="xxxexternalxxx" > Attribute Contains </ h1 >
h1[rel*=external] { color: red; }
クラスとIDも属性であり、属性セレクターで使用できることに注意してください。 マークアップを制御できないサイト用にCSSを作成し、開発者が3つのディーバを作成したとします。
< div id ="post_1" ></ div >
< div id ="post_two" ></ div >
< div id ="third_post" ></ div >
すべて選択できます：
div[id*=post] { color: red; }
[rel ^ = external]-属性は特定の値で始まります
< h1 rel ="external-link yep" > Attribute Begins </ h1 >
h1[rel^=external] { color: red; }
実際の使用例は、友人のサイトへのリンクを他のリンクとは異なるものにする必要がある場合です。 メインページへのリンクか内部ページかは関係ありません。スタイルは1つである必要があります。
a[href^=http://perishablepress.com] { color: red; }
これは、メインページとセカンダリページへのリンクに対応します。
[rel $ = external]-属性は特定の値で終わります
属性の初期値に基づいて選択できますが、最後から選択しないのはなぜですか？
< h1 rel ="friend external" > Attribute Ends </ h1 >
h1[rel$=external] { color: red; }
正直なところ、私はこれを使用した実際の例を見つけるのに苦労しています。 たとえば、最後に特定の文字を含むリンクを見つけることができます。
a[href$=#], a[href$=?] { color: red; }
[rel〜 = external]-属性には、スペースで区切られたリストの値が含まれます
おそらく、いくつかのクラスを要素に適用できることをご存知でしょう。 これを行うと、CSSの.class-nameをリンクに使用できます。 属性セレクターはそれほど単純ではありません。 属性に複数の値がある場合（たとえば、スペースで区切られたリスト）、 "〜="を使用する必要があります。
< h1 rel ="friend external sandwich" > Attribute Space Separated </ h1 >
h1[rel~=external] { color: red; }
「* =」が同じものを見つけてより柔軟になったときに、なぜこれを使用するのかと思うかもしれません。 実際、より普遍的ですが、あまりにも普遍的かもしれません。 * =でない場合、このセレクターは値の周りにスペースを必要とします。 したがって、2つの要素があり、一方が属性
rel="home friend-link"
で、もう一方が
rel="home friend link"
。 2番目の要素と通信するには、スペースで区切られたセレクターが必要です。
[rel | = external]-属性には分割ダッシュリストの値が含まれます
ダッシュで区切られたリストは、スペースで区切られたリストに非常に似ており、* =を使用する場合よりも規則を厳密に順守するためにも使用されます。
< h1 rel ="friend-external-sandwich" > Attribute Dash Separated </ h1 >
h1[rel|=external] { color: red; }
[title = one] [rel ^ = external]-複数の属性に一致
1つのセレクターで複数の属性セレクターを使用できますが、すべての条件に一致する必要があります。
< h1 rel ="handsome" title ="Important note" > Multiple Attributes </ h1 >
h1[rel=handsome][title^=Important] { color: red; }
ブラウザのサポート
上記の各例は、Safari、Chrome、Firefox、Opera、およびIEのすべての最新ブラウザーで機能します。 Internet Explorerは、バージョン7でこれをすべてサポートし、バージョン6でゼロをサポートします。 ブラウザでテストするには、 テストページを開きます 。 行/セレクターが赤の場合、セレクターは機能しています。