CSS

属性セレクタ

みいと

属性セレクタとは

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

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

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

[属性名]

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

<p class="">段落1</p>
<p>段落2</p>
p[class] {color: red;}

属性セレクタの例

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

[属性名=”属性値”]

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

<p class="sample1 sample2 sample3">段落1</p>
<p class="sample1 sample2">段落2</p>
p[class="sample1 sample2"] {color: red;}

属性セレクタの例

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

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

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

<p class="sample1 sample2">段落1</p>
<p class="sample1">段落2</p>
p[class~="sample1"] {color: red;}

属性セレクタの例

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

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

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

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

<p class="sample">段落1</p>
<p class="sample1">段落2</p>
<p class="sample-2">段落3</p>
p[class|="sample"] {color: red;}

属性セレクタの例

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

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

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

<p class="sample">段落1</p>
<p class="sample1">段落2</p>
<p class="test sample">段落3</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">段落1</p>
<p class="sample2">段落2</p>
<p class="test sample3">段落3</p>
p[class*="sample"] {color: red;}

属性セレクタの例

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

属性セレクタのまとめ

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

まとめ

  • 属性セレクタはシンプルセレクタの一つ
  • 属性セレクタは属性を使って様々な適用対象を指定できる

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました