14 October 2023

Understanding the :not() Pseudo-class in CSS

web

In CSS rules, you normally select elements that you want to apply styles to, and all matching elements get styled accordingly. But what if you want to flip the script and style everything except a few specific elements? That’s where the :not() pseudo-class comes into play. In this comprehensive guide, we’ll explore the nuances of CSS pseudo-classes, delve into the mechanics of the :not() pseudo-class, and examine how it functions when multiple selectors are involved.

What is :not()?

The :not() pseudo-class in CSS is like your custom-built filter; it allows you to target all elements except the ones you specify. In other words, it’s like saying, “Hey, I want to style all these elements, but NOT these specific ones.”

Syntax

Here’s how you write it:

:not(selector) {
  property: value;
}

selector: The element(s) you want to exclude from styling.

Simple Example

Let’s say you have a list, and you want to style all list items except the first one. Here’s how you’d do it:

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

li:not(:first-child) {
  color: red;
}

In this case, “Apple” remains the default color, while “Banana” and “Cherry” turn red.

Advanced Example

Imagine you have a collection of buttons, but you don’t want the “Cancel” button to inherit the same styles. Easy peasy with :not()!

<button class="btn">Save</button>
<button class="btn cancel">Cancel</button>
<button class="btn">Delete</button>

.btn:not(.cancel) {
  background-color: green;
  color: white;
}

Here, the “Save” and “Delete” buttons will have a green background and white text, but the “Cancel” button remains unaffected.

Can :not() Chain Multiple Selectors?

The short answer is: Yes, you can! The :not() pseudo-class allows you to chain multiple selectors, effectively excluding multiple elements at once. This capability becomes extremely useful when you want to apply styles to many elements while leaving out a few specific ones.

To chain multiple selectors, simply separate them by commas within the parentheses:

:not(selector1, selector2, selector3) {
  property: value;
}

Example: Excluding Multiple Elements

Let’s say you have a list, and you want to style all list items except the first and the last ones. Here’s a practical example:

<ul>
  <li class="first">Apple</li>
  <li>Banana</li>
  <li class="last">Cherry</li>
</ul>

li:not(.first, .last) {
  color: red;
}

With this style rule, only the “Banana” list item will turn red, leaving “Apple” and “Cherry” unaffected.

Example: Combining with Other Pseudo-classes

You can also combine :not() with other pseudo-classes for more complex scenarios:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li class="special">Item 3</li>
  <li>Item 4</li>
</ul>

li:not(.special):nth-child(odd) {
  background-color: lightgray;
}

In this example, the background color of “Item 1” and “Item 4” will change to light gray, but “Item 3” with the class .special remains unaffected even though it’s an odd child.

Limitations

Remember, :not() won’t accept complex selectors or pseudo-elements. So, you can’t do something like :not(div > p, div > span).

Conclusion

The :not() pseudo-class is an excellent tool for fine-tuning your styling strategy. It provides a straightforward way to exclude specific elements from your CSS rules, allowing for cleaner, more efficient code.

Stay curious and keep coding! 🎉

14 October 2023