Bird
Raised Fist0
CSSmarkup~5 mins

Not selector in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the CSS :not() selector do?
easy
A. It selects only the elements matching the selector inside :not().
B. It selects all elements except those matching the selector inside :not().
C. It selects elements that have no children.
D. It selects elements that are hidden.

Solution

  1. Step 1: Understand the purpose of :not()

    The :not() selector excludes elements that match the selector inside it.

  2. Step 2: Identify what it selects

    It selects all elements except those that match the selector inside :not().

  3. Final Answer:

    It selects all elements except those matching the selector inside :not(). -> Option B

  4. Quick Check:

    :not() excludes matching elements [OK]
Hint: Think 'everything but' the selector inside :not() [OK]
Common Mistakes:
  • Thinking it selects only matching elements
  • Confusing it with :only-child or :empty
  • Assuming it selects hidden elements
2. Which of the following is the correct syntax to select all p elements except those with class intro?
easy
A. p:not(.intro) { color: blue; }
B. p:not#intro { color: blue; }
C. p:not[.intro] { color: blue; }
D. p:not(intro) { color: red; }

Solution

  1. Step 1: Check the syntax for :not() with class selector

    The correct syntax uses parentheses with a class selector inside: :not(.intro).

  2. Step 2: Verify the selector targets p elements except those with class intro

    p:not(.intro) means all p elements except those with class intro.

  3. Final Answer:

    p:not(.intro) { color: blue; } -> Option A

  4. Quick Check:

    Correct :not() syntax uses parentheses and proper selector [OK]
Hint: Use parentheses and proper selector inside :not() [OK]
Common Mistakes:
  • Using square brackets instead of parentheses
  • Missing dot for class selector
  • Using # instead of . for class
3. Given this HTML:
<div>
  <p class="intro">Hello</p>
  <p>World</p>
  <p class="note">Note</p>
</div>

And CSS:
p:not(.intro) { color: red; }

What color will the text inside each <p> be?
medium
A. Hello: black (default), World: red, Note: red
B. Hello: red, World: red, Note: red
C. Hello: red, World: black, Note: black
D. Hello: black, World: black, Note: black

Solution

  1. Step 1: Identify which p elements match :not(.intro)

    The p with class intro is excluded. The other two p elements match.

  2. Step 2: Determine the color applied

    Only p elements without class intro get color: red;. So "World" and "Note" are red, "Hello" stays default black.

  3. Final Answer:

    Hello: black (default), World: red, Note: red -> Option A

  4. Quick Check:

    :not(.intro) excludes "Hello" [OK]
Hint: Only elements NOT matching inside :not() get styles [OK]
Common Mistakes:
  • Assuming all p get red color
  • Confusing which elements are excluded
  • Ignoring default browser styles
4. What is wrong with this CSS selector?
div:not .highlight { background: yellow; }
medium
A. Background color cannot be applied to div.
B. Using div instead of .highlight.
C. Missing parentheses around the selector inside :not().
D. The selector is correct and will work as expected.

Solution

  1. Step 1: Check syntax of :not() usage

    The :not() selector requires parentheses around the selector inside it.

  2. Step 2: Identify the error in the given selector

    The selector uses :not .highlight without parentheses, which is invalid syntax.

  3. Final Answer:

    Missing parentheses around the selector inside :not(). -> Option C

  4. Quick Check:

    :not() always needs parentheses [OK]
Hint: Always use parentheses immediately after :not [OK]
Common Mistakes:
  • Omitting parentheses in :not()
  • Adding space between :not and parentheses
  • Assuming :not works like a combinator
5. You want to style all button elements except those that are disabled or have the class cancel. Which CSS selector achieves this?
hard
A. button:not(:disabled .cancel) { background: green; }
B. button:not(:disabled, .cancel) { background: green; }
C. button:not(:disabled) .cancel { background: green; }
D. button:not(:disabled):not(.cancel) { background: green; }

Solution

  1. Step 1: Understand multiple exclusions with :not()

    To exclude multiple selectors, chain multiple :not() selectors.

  2. Step 2: Analyze each option

    button:not(:disabled):not(.cancel) { background: green; } correctly chains :not(:disabled) and :not(.cancel). button:not(:disabled, .cancel) { background: green; } tries to combine selectors inside one :not(), which is invalid. button:not(:disabled .cancel) { background: green; } uses invalid syntax. button:not(:disabled) .cancel { background: green; } selects .cancel inside button:not(:disabled), which is incorrect.

  3. Final Answer:

    button:not(:disabled):not(.cancel) { background: green; } -> Option D

  4. Quick Check:

    Chain multiple :not() for multiple exclusions [OK]
Hint: Chain multiple :not() for multiple exclusions [OK]
Common Mistakes:
  • Trying to combine selectors inside one :not()
  • Using spaces inside :not() incorrectly
  • Misunderstanding descendant selectors