cssセレクタで要素内の内容によって変化

簡単に考えれば対象の要素にclassを作って入れれば済むのですが・・・・

ここを見ている先輩方であればもっとスマートにセレクタで解決できるのでは？と思い質問してみました。

下記のHTMLで花丸の時だけセレクタを使って
背景の色を♯ffffe7にする方法はありますでしょうか？

html
1<table class="spec_list">
2<tbody>
3<tr>
4<th>おいしさ</th>
5<th>原材料・成分</th>
6<th>安全性</th>
7<th>価格(１杯分)</th>
8<th>特典</th>
9</tr>
10<tr>
11<td><img src="images/hanamaru.png" alt="花丸"></td>
12<td><img src="images/hanamaru.png" alt="花丸">
13</td>
14<td><img src="images/hanamaru.png" alt="花丸"></td>
15<td><img src="images/maru1.png" alt="丸">
16</td>
17<td><img src="images/maru2.png" alt="２重丸"></td>
18</tr>
19</tbody>
20</table>

退会済みユーザー

2018/01/12 23:37

どちらの背景色を変更するのでしょうか？

行動規範の内容に同意します

回答2件

:has()

cssセレクタで要素内の内容によって変化

td要素の背景色を変更したい、という意味でしょうか。

4.5. 関係上の疑似クラス： :has() - Selectors Level 4 （日本語訳）

css
1td:has(>img[src="images/hanamaru.png"])

ただし、サポートしているブラウザが存在しません(2018/01/13現在)。

:has() CSS relational pseudo-class - Can I use...

Re: AMK さん

投稿2018/01/13 00:03

think49

総合スコア18162

AMK

2018/01/13 09:15

そんなセレクタも有ったんですね勉強になりました。

行動規範の内容に同意します

ベストアンサー

属性セレクタでいけたはず。

css
1td {
2  position:relative;
3  overflow:hidden;
4}
5td img[alt="花丸"]:after {
6    content:"";
7    display:block;
8    background:#ffffe7;
9    position:absolute;
10    width:100%;
11    height:100%;
12    top:0;
13    left:0;
14    z-index:-1;
15}