CSS 要素名[属性名~=”値”]で属性の値がどれか一つに合致する
環境
Google Chrome 109.0.5414.120
Windows 10 Home 64bit
構文
要素名[属性名~="値"]
属性の値が複数ある場合で、指定の属性の値がどれかひとつに合致する要素にCSSを適用します。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
p[class~="pA"]{
color:red;
}
p[class~="pB"]{
color:blue;
}
</style>
</head>
<body>
<p class="pA pB pC">tokyo</p>
<p class="pD pW pF">oosaka</p>
</body>
</html>
実行結果
p[class~="pA"]に合致する要素「tokyo」の色が青になります。