MRRI

部分一致セレクタ（[attr^=""], [attr$=""], [attr*=""]）は、属性値が特定の文字列を含む場合にスタイルを適用するために使われます。

部分一致セレクタの種類

1. ^=: 前方一致セレクタ

[attr^="value"]
属性値が特定の文字列で始まる要素を選択します。

使用例：

<a href=”https://example.com”>Example01</a>
<a href=”http://example.org”>Example02</a>
<a href=”mailto:info@example.com”>Example03</a>

/* href属性が “https” で始まるリンクをスタイル */
a[href^=”https”] {
color: green;
}

結果：https://example.com のリンクのみが緑色になります。

2. $=: 後方一致セレクタ

[attr$="value"]
属性値が特定の文字列で終わる要素を選択します。

使用例：

<img src=”image.jpg” alt=”Sample Image”>
<img src=”photo.png” alt=”Sample Photo”>
<img src=”icon.svg” alt=”Sample Icon”>

/* src属性が “.png” で終わる画像をスタイル */
img[src$=”.png”] {
border: 2px solid blue;
}

結果：.pngで終わる画像のみが青枠になります。

3. *=: 部分一致セレクタ

[attr*="value"]
属性値に特定の文字列が含まれる要素を選択します。

<div class=”card-item”></div>
<div class=”card-special”></div>
<div class=”special-item”></div>

/* class属性に “special” を含む要素をスタイル */
[class*=”special”] {
background-color: yellow;
}

結果：card-specialとspecial-itemのクラスを持つ要素が黄色背景になります。