CSS notで特定の要素にCSSを適用しないサンプル

2022年12月1日

環境
Google Chrome　107.0.5304.122（Official Build）（64 ビット）
Windows 10 Home 64bit

構文
セレクタ:not(適用しないセレクタ1):not(適用しないセレクタ2){
}
特定の要素だけCSSを適用しない場合に使用します。
複数を否定する場合は、:not()を続けます。
使用例

<!DOCTYPE html>

<html>

<head>

<style>

/* p:not(.pB) { */

p:not(.pB):not(.pD) {

color:skyblue;

}

</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>

<!DOCTYPE html> <html> <head> <style> /* p:not(.pB) { */ p:not(.pB):not(.pD) { color:skyblue; } </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>

<!DOCTYPE html>
<html>
<head>
<style>
  /* p:not(.pB) { */
  p:not(.pB):not(.pD) {
     color:skyblue;
  }
</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>

実行結果
「tokyo」と「yokohama」文字がCSSが適用されます。　色が「skyblue」に変わります。

CSS

Posted by arkgame

関連投稿: