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」の色が青になります。

 

CSS

Posted by arkgame