Not selector in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the :not() selector do in CSS?

The :not() selector selects all elements that do NOT match the selector inside the parentheses. It helps exclude specific elements from styling.

beginner

How would you select all <p> elements except those with class highlight?

Use p:not(.highlight). This selects all paragraphs that do not have the class highlight.

intermediate

Can :not() accept multiple selectors separated by commas?

No. The :not() selector accepts only a single simple selector. To exclude multiple selectors, chain multiple :not() selectors.

beginner

Example: div:not(.active) - What does this select?

It selects all <code>div</code> elements that do NOT have the class <code>active</code>. So any <code>div</code> without that class will be styled.

intermediate

Why use :not() instead of just selecting what you want directly?

Sometimes it’s easier to say "select everything except this" rather than listing all the things you want. It keeps CSS simpler and easier to maintain.

What does button:not(.disabled) select?

A All buttons with class disabled

B All buttons without class disabled

C All elements except buttons with class disabled

D Only buttons with class disabled

The :not(.disabled) selects buttons that do NOT have the class disabled.

Can :not() contain multiple selectors separated by commas?

A No, only one simple selector is allowed

B Yes, it accepts multiple selectors

C Yes, but only if selectors are classes

D No, it only works with IDs

:not() accepts only one simple selector inside the parentheses.

Which CSS rule excludes all li elements with class special?

A li:not(.special)

B li:not#special

C :not(li.special)

D li.special

li:not(.special) selects all li elements except those with class special.

What is the main benefit of using :not()?

A To style all elements

B To select elements with a specific class

C To select only IDs

D To exclude certain elements from selection

:not() helps exclude elements from being selected.

Which selector selects all input elements except those of type checkbox?

A input[type=checkbox]

B input:checkbox

C input:not([type=checkbox])

D input:not(.checkbox)

input:not([type=checkbox]) selects all inputs except checkboxes.

Explain how the :not() selector works and give a simple example.

Think about selecting everything except something specific.

Describe a situation where using :not() makes CSS easier to write.

Imagine you want to style many items but skip a few.

Practice

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