CSS 要素名[属性名~=”値”]でどれか１つに合致する要素にCSSを適用するサンプル

2022年11月4日

環境
Google Chrome　106.0.5249.119
Windows 10 Home 64bit

構文
1.divタグ要素属性が複数の場合
div[class~="値"]
divタグの指定の属性の値がどれか１つ合致する要素にCSSを適用します。

2.pタグ要素属性が複数の場合
p[class~="値"]
pタグの指定の属性の値がどれか１つ合致する要素にCSSを適用します。

使用例

<!DOCTYPE html>
<html>
<head>
<style>
/*どれかpCに合致する*/
div[class~="pC"]{
      color:red;
    background-color:skyblue;
}
/*どれかpFに合致する*/
p[class~="pF"]{
      color:green;
    background-color:gray;
}
</style>
</head>
<body>
      <div class="pA pB pC">tokyo</div>
      <p class="pD pE pF">oosaka</p>
</body>
</html>

結果
div要素「pA pB pC」の文字色(red)と背景色(skyblue)をします。
p要素「pA pB pC」の文字色(green)と背景色(gray)をします。

CSS

Posted by arkgame

関連記事: