Jobs Hub

CSS :not() - Select All Elements except Specified One

The CSS :not pseudo-class is used when we need to select and apply style to all elements except the specified one. For example, the following CSS code applies defined style to all elements except P

:not(p) {text-align: center;}

The above CSS code, aligns all elements to the center (horizontally) of the page, except p elements or paragraphs.

CSS :not() Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p {color: black;}
      :not(p) {color: brown;}
   </style>
</head>
<body>

   <h2>The CSS :not Selector</h2>
   <p>This para one.</p>
   <p>This is para two.</p>
   <span>@CSS</span>
   
</body>
</html>
Output

The CSS :not Selector

This para one.

This is para two.

@CSS

CSS :not Syntax

The syntax to use CSS :not selector, to apply the style to all HTML elements except the specified one, is:

:not(selector) {declarations}

CSS Online Test

« Previous Tutorial Next Tutorial »