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.
2 Answers
: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; }
Comments
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>
.foo, .bar, .baz .foobar .foobaz etc...{}, with a humongous list, or you can just dodiv:not(.foo) {}.