What is the usage of the pseudo class :not()?

Question

I saw this pseudo class :not() being used in a source code of a Youtube video page, searching in the MDN I saw this article explaining the pseudo class, but I couldn't understand why (and in which case) someone would use that.

Imagine that you have hundreds of different selectors, let's say classes. Imagine you want to select every div class except a single one. You could do `.foo, .bar, .baz .foobar .foobaz etc...{}`, with a humongous list, or you can just do `div:not(.foo) {}`. — Gerardo Furtado, Feb 26 '20 at 05:10

score 2 · Answer 1 · answered Feb 26 '20 at 05:06

2

:not() use for exception in css.for example when you want to apply some styles in all div tags except one div with specific class you use not:() like following code!

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

answered Feb 26 '20 at 05:06

Yasaman.Mansouri

550
1
3
13

score 1 · Answer 2 · edited Mar 06 '20 at 15:06

If you have many same class or item and you don't want to one specific item shouldn't be affected. It will be like this.

If your html like this

.contant-wrapper div:not(.new-heading){
  background-color: black;
  color: white;
  margin-bottom: 15px;
  padding: 10px;
}

<div class="contant-wrapper">
  <div class="heading">bla bla bla</div>
  <div class="title">bla bla bla</div>
  <div class="card">bla bla bla</div>
  <div class="new-heading">bla bla bla</div>
</div>

List item element

ul li:not(:last-child){
  margin-bottom: 10px;
}
ul li:not(:first-child){
  border-top: 1px solid black;
}

<ul>
  <li>bla bla bla</li>
  <li>bla bla bla</li>
  <li>bla bla bla</li>
  <li>bla bla bla</li>
  <li>bla bla bla</li>
</ul>

What is the usage of the pseudo class :not()?

2 Answers2