Languages
[Edit]
EN

CSS - :not pseudo-class

0 points
Created by:
Fletcher-Peralta
478

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

Quick solution:

:not(div) {
  color: red;
}

 

Practical example

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

// ONLINE-RUNNER:browser;

<!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>

Multiple arguments

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

// ONLINE-RUNNER:browser;

<!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>

References

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join