属性セレクタ

属性セレクタとは

指定した属性を使用している要素や、指定した属性の属性値によって適用対象を決めるセレクタを属性セレクタといいます。

属性セレクタはシンプルセレクタの一つです。

セレクタの種類CSSのシンプルセレクタについてザックリまとめました。...

[属性名]

指定した属性名が使われている要素が適用対象になります。

<p class="">段落１</p>
<p>段落２</p>

p[class] {color: red;}

このようにHTMLで属性値が指定されていない状態でも、CSSで指定した属性を使っていればスタイルが適用されます。

[属性名=”属性値”]

指定した属性に指定した属性値が指定されている要素が適用対象になります。(全体一致)

<p class="sample1 sample2 sample3">段落１</p>
<p class="sample1 sample2">段落２</p>

p[class="sample1 sample2"] {color: red;}

このように指定した属性と属性値が完全に一致した要素に対して、スタイルが適用されます。

[属性名~=”属性値”]

指定した属性に指定した属性値が指定されている要素が適用対象になります。
属性値が複数指定されている場合は、どれか一つと一致すればOKです。

<p class="sample1 sample2">段落１</p>
<p class="sample1">段落２</p>

p[class~="sample1"] {color: red;}

このように、指定した属性値がどれか一つと一致している要素に、スタイルが適用されます。

クラス属性を指定した場合はクラスセレクタと同じ意味になります。

[属性名|=”属性値”]

指定した属性名に指定した属性値が指定されている要素が適用対象になります。
値全体か、ハイフン区切りの値(〇〇-〇〇)の前半部分が一致すればOKです。

<p class="sample">段落１</p>
<p class="sample1">段落２</p>
<p class="sample-2">段落３</p>

p[class|="sample"] {color: red;}

このように、指定した属性値が含まれているか、ハイフン区切りの値の前半部分が一致していればスタイルが適用されます。

[属性名^=”属性値の先頭”]

指定した属性名の属性値が「属性値の先頭」で始まる要素が適用対象になります。

<p class="sample">段落１</p>
<p class="sample1">段落２</p>
<p class="test sample">段落３</p>

p[class^="sample"] {color: red;}

このように、属性値の先頭が指定した値で始まる要素にスタイルが適用されます。

[属性名$=”属性値の末尾”]

指定した属性名の属性値が「属性値の末尾」で終わる要素が適用対象になります。

<a href="sample.html">リンク</a><br>
<a href="sample.png">画像を表示 </a>

a[href$=".html"] {color: red;}

このように、属性値の末尾が指定した値で終わる要素にスタイルが適用されます。

[属性名*=”属性値の一部”]

指定した属性名の属性値に「属性値の一部」を含む要素が適用対象になります。

<p class="sample1">段落１</p>
<p class="sample2">段落２</p>
<p class="test sample3">段落３</p>

p[class*="sample"] {color: red;}

このように、指定した値が属性値に含まれている要素にスタイルが適用されます。

属性セレクタのまとめ

今回は属性セレクタについてまとめました。
おじさんには他のシンプルセレクタよりも少し使い方が難しく感じます(;^ω^)

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。