「CSS」notで特定の要素にスタイルを適用しないサンプル

2021年7月29日

書式
タイプセレクタ:not(適用しないセレクタ1):not(適用しないセレクタ2)
使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<style>
/*セレクタ:not(適用しないセレクタ)*/
div:not(.tB):not(.tD) {
color: SkyBlue;
}
</style>
<body>
<div class="tA">aaa 111</div>
<div class="tB">bbb 222 適用しないセレクタ</div>
<div class="tC">ccc 333</div>
<div class="tD">ddd 444 適用しないセレクタ</div>
</body>
<style> /*セレクタ:not(適用しないセレクタ)*/ div:not(.tB):not(.tD) { color: SkyBlue; } </style> <body> <div class="tA">aaa 111</div> <div class="tB">bbb 222 適用しないセレクタ</div> <div class="tC">ccc 333</div> <div class="tD">ddd 444 適用しないセレクタ</div> </body>
<style>
  /*セレクタ:not(適用しないセレクタ)*/
  div:not(.tB):not(.tD) {
    color: SkyBlue;
  }
</style>
<body>
  <div class="tA">aaa 111</div>
  <div class="tB">bbb 222 適用しないセレクタ</div>
  <div class="tC">ccc 333</div>
  <div class="tD">ddd 444 適用しないセレクタ</div>
</body>

 

CSS

Posted by arkgame