CSS属性セレクタ

SCSSを使用してUIをモデリングする場合、共通のプロパティがある場合は、スタイルプロパティを指定するのに便利です.class、lang、hrefなど多くのプロパティを適用できます.

属性セレクタのクリーンアップ

-[attr]:attr名前属性を持つ要素を選択します.
-[attr=value]:attr属性値が正確な要素を選択します.
-[attr~=value]:attr属性値が正確な要素を選択します.attrプロパティには、スペースで区切られた複数の値があります.すなわち、複数のクラスが指定されているがattrが属性値である場合に選択します.
-[attr|=value]:attrには、正確な値またはvalueで始まる属性値があり、後に-(U+002 D)文字が続く場合は、要素を選択します.これは、開始要素として選択できますが、ハイフンが存在する要素も選択できます.通常、言語サブコード(en-US、ko-KRなど)が一致しているかどうかを確認するために使用されます.
-[attr^=value]:attr属性値.値に接頭辞が含まれている場合は、この要素を選択します.
- [attr$=value]値にattrという属性値が含まれ、接尾辞として使用される場合は、要素を選択します.
-[attr*=value]:attr属性値.値にvalueという文字列が少なくとも1つ存在する場合は、この要素を選択します.
-[attr operator value i]:カッコを閉じる前にiまたはIを付けると、値の大文字と小文字は区別されません.(ASCIIの範囲内に存在する文字のみ)
-[attr operator value s]:カッコを閉じる前にsまたはSを加えて値の大文字と小文字を区別します.(ASCIIの範囲内に存在する文字のみ)

属性セレクタの例

例えばaタグ.
CSS

a {
  color: blue;
}

/* Internal links, beginning with "#" */
a[href^="#"] {
  background-color: gold;
}

/* Links with "example" anywhere in the URL */
a[href*="example"] {
  background-color: silver;
}

/* Links with "insensitive" anywhere in the URL,
   regardless of capitalization */
a[href*="insensitive" i] {
  color: cyan;
}

/* Links with "cAsE" anywhere in the URL,
with matching capitalization */
a[href*="cAsE" s] {
  color: pink;
}

/* Links that end in ".org" */
a[href$=".org"] {
  color: red;
}

/* Links that start with "https" and end in ".org" */
a[href^="https"][href$=".org"] {
  color: green;
}

HTML

<ul>
  <li><a href="#internal">Internal link</a></li>
  <li><a href="http://example.com">Example link</a></li>
  <li><a href="#InSensitive">Insensitive internal link</a></li>
  <li><a href="http://example.org">Example org link</a></li>
  <li><a href="https://example.org">Example https org link</a></li>
</ul>

結果

参考文献
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors