Not selector in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Using :not() to exclude elements

Given the HTML below, which CSS selector will color all

elements except those with class exclude in red?

CSS

<section>
  <p>Paragraph 1</p>
  <p class="exclude">Paragraph 2</p>
  <p>Paragraph 3</p>
  <p class="exclude">Paragraph 4</p>
</section>

A p:not(.exclude) { color: blue; }

B p:not(#exclude) { color: red; }

C p:not(.exclude) { color: red; }

D p:not(.exclude) { background-color: red; }

💡 Hint

Use :not() with the class selector inside parentheses to exclude elements with that class.

The :not() selector excludes elements matching the selector inside it. Here, p:not(.exclude) selects all

elements that do NOT have the class 'exclude'. Option C colors those paragraphs red as required. Option C is invalid syntax because #exclude is an ID selector and missing parentheses. Option C colors the correct elements but uses blue instead of red. Option C changes background color, not text color.

❓ selector

intermediate

Selecting inputs except checkboxes

Which CSS selector will select all elements except those of type checkbox?

CSS

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="password" />
</form>

A input:not(type="checkbox") { border: 2px solid green; }

B input:not([type="checkbox"]) { border: 2px solid green; }

C input:not(#checkbox) { border: 2px solid green; }

D input:not(.checkbox) { border: 2px solid green; }

💡 Hint

Use attribute selectors inside :not() to exclude inputs with type checkbox.

Option B correctly uses the attribute selector [type="checkbox"] inside :not() to exclude checkbox inputs. Option B is invalid syntax because it misses brackets around the attribute selector. Options A and D try to exclude by ID or class which do not apply here.

❓ rendering

advanced

Visual effect of :not() with multiple classes

Consider the CSS below. What color will the

with classes box and highlight have?

CSS

<style>
  .box:not(.highlight) { background-color: yellow; }
  .box.highlight { background-color: blue; }
</style>
<div class="box highlight">Test Box</div>

A Blue background

B Yellow background

C No background color

D Both yellow and blue backgrounds layered

💡 Hint

Check which selectors apply and which have higher specificity.

The div has both classes 'box' and 'highlight'. The selector .box:not(.highlight) excludes elements with class 'highlight', so it does not apply here. The selector .box.highlight applies and sets background to blue. Therefore, the background color is blue.

🧠 Conceptual

advanced

Understanding :not() with complex selectors

Which statement about the CSS selector div:not(.active) > p is true?

A Selects all <p> elements that are direct children of <div> elements without class 'active'.

B Selects all <p> elements inside any <div> that does not have class 'active', including nested descendants.

C Selects all <p> elements that do not have class 'active' and are inside any <div>.

D Selects all <div> elements that do not have class 'active' and contain <p> children.

💡 Hint

Look carefully at the combinator and :not() placement.

The selector div:not(.active) > p means: select

elements that are direct children (>) of

elements that do NOT have the class 'active'. Option A states this correctly. Option A is incorrect because it says nested descendants, but > means direct children only. Option A incorrectly applies :not() to

elements. Option A selects

elements, but the selector targets

elements.

❓ accessibility

expert

Using :not() for accessible focus styling

You want to style all interactive elements except disabled buttons when they receive keyboard focus. Which CSS selector correctly applies a visible outline only to those elements?

A :is(button, a, input):not(:disabled:focus-visible) { outline: 3px solid orange; }

B :is(button, a, input):focus-visible:not(:disabled) { outline: 3px solid orange; }

C :is(button, a, input):focus:not(:disabled) { outline: 3px solid orange; }

D :is(button, a, input):not(:disabled):focus-visible { outline: 3px solid orange; }

💡 Hint

Use :not() to exclude disabled elements before applying :focus-visible.

Option D correctly selects buttons, links, and inputs that are not disabled and are focused via keyboard (:focus-visible). Option D places :focus-visible before :not(:disabled), but best practice is to exclude first. Option D uses :not(:disabled:focus-visible) which doesn't properly target the focus state. Option D uses :focus instead of :focus-visible, which is less accessible because it applies on mouse focus too.

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