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

Need a 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

Need a 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 */
}

Need a 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

Need a hint?

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