CSS 要素名[属性名~=”値”]でどれか1つに合致する要素にCSSを適用するサンプル
環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit
構文
1.divタグ要素属性が複数の場合
div[class~="値"]
divタグの指定の属性の値がどれか1つ合致する要素にCSSを適用します。
2.pタグ要素属性が複数の場合
p[class~="値"]
pタグの指定の属性の値がどれか1つ合致する要素に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)をします。