CSSの属性セレクターの指定方法(前方一致, 後方一致, 部分一致)

<ul>
  <li><a href="#top">TOP</a></li>
  <li><a href="https://developer.mozilla.org">mozilla</a></li>
  <li><a href="https://example.com">example</a></li>
  <li><a href="https://www.yahoo.co.jp">yahoo</a></li>
</ul>

/* 前方一致 "#"から始まる */
a[href^="#"] {
  color: fuchsia;
}

/* 後方一致 ".org/"で終わる */
a[href$=".org"] {
  color: orange;
}

/* 部分一致 "example"が含まれる */
a[href*="example"] {
  color: red;
}

/* 前方一致と後方一致 "https"で始まり ".jp/"で終わる */
a[href^="https"][href$=".jp"] {
  color: green;
}

これは画像です

---

【参考】

• Selectors Level 3 - 6.3. Attribute selectors
• 属性セレクター - CSS: カスケーディングスタイルシート | MDN
• CSS セレクター - ウェブ開発を学ぶ | MDN