0
0
CSSmarkup~5 mins

Not selector in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

The :not() selector helps you style elements except the ones you want to exclude. It makes your CSS simpler by avoiding extra classes or complicated rules.

You want to style all buttons except the submit button.
You want to highlight all list items except the first one.
You want to apply a style to all paragraphs except those with a special class.
You want to change the color of all links except those inside the footer.
Syntax
CSS
selector:not(selector) { property: value; }

The :not() takes a simple selector inside the parentheses.

It excludes elements matching the selector inside :not() from the style.

Examples
Styles all buttons except those with class submit.
CSS
button:not(.submit) {
  background-color: lightblue;
}
Styles all list items except the first one.
CSS
li:not(:first-child) {
  color: gray;
}
Styles all paragraphs except those with class special.
CSS
p:not(.special) {
  font-style: italic;
}
Sample Program

This example styles all buttons with a green background except the button with class submit, which has a red background.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Not Selector Example</title>
  <style>
    button:not(.submit) {
      background-color: lightgreen;
      border: 2px solid green;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      cursor: pointer;
    }
    button.submit {
      background-color: lightcoral;
      border: 2px solid darkred;
      padding: 0.5rem 1rem;
      font-size: 1rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button>Cancel</button>
  <button class="submit">Submit</button>
  <button>Reset</button>
</body>
</html>
OutputSuccess
Important Notes

You can combine :not() with other selectors for more control.

Using :not() keeps your CSS clean and easier to read.

Summary

:not() excludes elements from a style.

Use it to style everything except specific elements.

It helps write simpler and clearer CSS.