[Edit]

CSS - :not pseudo-class

1 contributors

2 contributions

0 discussions

0 points

Created by:

Fletcher-Peralta

778

In this article, we would like to show you :not pseudo-class example in CSS.

Quick solution:

xxxxxxxxxx
 
:not(div) {
  color: red;
}

Practical example

Edit

In this example, we change the font color of all elements that are not div elements using :not pseudo-class.

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <style>
​
      div {
        color: black;
      }
​
      :not(div) {
        color: red;
      }
​
    </style>
  </head>
  <body>
    <div>div element</div>
    <p>p element</p>
    <h3>h3 element</h3>
    <h2>h2 element</h2>
  </body>
</html>

Auto running

Multiple arguments

Edit

To include multiple elements with :not pseudo-class you can specify them inside the brackets separated by a comma.

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <style>
​
      div {
        color: black;
      }
      
      p {
        color: blue;
      }
​
      :not(div, p) {
        color: red;
      }
​
    </style>
  </head>
  <body>
    <div>div element</div>
    <p>p element</p>
    <h3>h3 element</h3>
    <h2>h2 element</h2>
    <ul>Unordered List:
      <li>li element</li>
      <li>li element</li>
    </ul>
    <ol>Ordered List:
      <li>li element</li>
      <li>li element</li>
    </ol>
  </body>
</html>