CSS notで特定の要素にCSSを適用しない方法
環境
Google Chrome 109.0.5414.120
Windows 10 Home 64bit
構文
セレクタ:not(適用しないセレクタ){ CSSコード
}
セレクタ:not(適用しないセレクタ):not(適用しないセレクタ){ CSSコード
}
特定の要素だけCSSを適用しない場合に使用します。
複数を否定する場合は、:not()を続けます。
使用例
<!DOCTYPE html>
<html>
<head>
<style>
p:not(.pB):not(.pC){
color:green;
}
</style>
</head>
<body>
<p class="pA">tokyo</p>
<p class="pB">oosaka</p>
<p class="pC">fukuoka</p>
<p class="pD">yokohama</p>
</body>
</html>
結果
pBとpCクラスに対して:notを指定しています。
「tokyo」と「yokohama」の文字色が緑になります。