CSS's :not() and Multi-Condition Selectors

In this lesson you'll learn how to use CSS selectors combining :not() and multiple conditions, so you can express detailed conditional branching. This is for people searching "CSS :not usage."

Using :not(condition) lets you select elements that are "anything except" that condition. Writing classes back to back, like .a.b, lets you select "an element that has both a and b" (a way of using it like an AND condition). The advantage is being able to express detailed conditional branching without adding extra classes.

The sample code specifies strikethrough text with li:not(.important) for "items without the important class," and red, bold text with li.important for "items with the important class." Confirm how the exact same <li> tag ends up looking completely different depending on whether or not it has the class.

A common beginner stumbling block is that there's a limit to how complex the selector inside :not() can be. You can negate a simple class or tag, but trying to express a complex condition using only :not() can become hard to read — in that case, it may be clearer to just add another class.

This shines in situations like "only strike through list items that don't have an important mark," where you want a different look depending on the condition. Getting comfortable combining selectors lets you dramatically reduce the amount of CSS you have to write.