Select Element That Does Not have Specific Class

如何選取某個 element 而且不包含特定 class name?

解法：

Simple example: excluding by class

div:not(.class)

Would select all div elements without the class .class

div:not(.class) {
  color: red;
}

<div>Make me red!</div>
<div class="class">...but not me...</div>

---

Complex example: excluding by type / hierarchy

:not(div) > div

Would select all div elements which arent children of another div

div {
  color: black
}
:not(div) > div {
  color: red;
}

<div>Make me red!</div>
<div>
  <div>...but not me...</div>
</div>

---

Complex example: chaining pseudo selectors

With the notable exception of not being able to chain/nest :not selectors and pseudo elements, you can use in conjunction with other pseudo selectors.

div {
  color: black
}
:not(:nth-child(2)){
  color: red;
}

<div>
  <div>Make me red!</div>
  <div>...but not me...</div>
</div>

---

資料來源

• How to Select Element That Does Not have Specific Class
  https://stackoverflow.com/questions/21975881/how-to-select-element-that-does-not-have-specific-class
• Can I write a CSS selector selecting elements NOT having a certain class or attribute?
  https://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class-or-attr