Not selector in CSS - Mini Project: Build & Apply

Highlight All Items Except the Selected One Using the CSS :not() Selector

📖 Scenario: You are creating a simple webpage with a list of fruits. You want to highlight all fruits except the one that is selected by the user.

🎯 Goal: Build a webpage with a list of fruits where all items except the selected one have a light gray background using the CSS :not() selector.

📋 What You'll Learn

Create an unordered list with exactly five fruit items: Apple, Banana, Cherry, Date, Elderberry

Add a CSS class called selected to the Banana list item

Use the CSS :not() selector to style all list items except the one with the selected class

Set the background color of the non-selected items to #f0f0f0

Ensure the selected item has no background color

💡 Why This Matters

🌍 Real World

Using the :not() selector helps you style all elements except a specific one, which is common in menus, lists, and interactive UI components.

💼 Career

Front-end developers often use :not() to write cleaner CSS that targets groups of elements while excluding exceptions, improving maintainability and user experience.

1

Create the HTML list of fruits

Create an unordered list <ul> with five list items <li> containing the exact fruit names: Apple, Banana, Cherry, Date, and Elderberry.

CSS

Hint

Use the <ul> tag for the list and add five <li> tags inside it with the fruit names.

2

Add the selected class to Banana

Add the CSS class selected to the Banana list item by modifying its <li> tag to include class="selected".

CSS

  Apple
  Banana 
  Cherry
  Date
  Elderberry

Hint

Find the Banana list item and add class="selected" inside its <li> tag.

3

Write CSS to style all non-selected list items

Write a CSS rule using the :not() selector to select all li elements that do NOT have the class selected. Set their background color to #f0f0f0.

CSS

/* Style all li elements except the one with class selected */
li:not(.selected) {
  /* Your code here */
}

Hint

Use li:not(.selected) as the selector and set background-color: #f0f0f0; inside the curly braces.

4

Ensure the selected item has no background color

Add a CSS rule to the li.selected selector that sets the background color to transparent to make sure the selected item has no background color.

CSS

li:not(.selected) {
  background-color: #f0f0f0;
}
li.selected {
  /* Your code here */
}


  Apple
  Banana
  Cherry
  Date
  Elderberry

Hint

Use the selector li.selected and set background-color: transparent; inside its curly braces.

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