CSS :not() Selector for Elements Without a Class or Attribute

By the end of this page, you will understand how to use the CSS :not() pseudo-class to select elements that do not have a certain class or attribute. You will also learn the limits of this approach, how it behaves with descendant elements, and how to apply it safely in real stylesheets.

CSS includes a pseudo-class called :not() that lets you match elements that do not meet a condition.

For this question, the key idea is:

:not(.printable)

This selector matches any element that does not have the class printable.

You can also use :not() with attributes, such as:

:not([disabled])

which matches elements that do not have the disabled attribute.

Why this matters

In real projects, you often need to:

• style everything except a special group
• hide non-printable parts of a page during printing
• exclude buttons, ads, menus, or helper UI from certain layouts
• target elements that are missing an attribute or class

The :not() selector is useful because it lets you express exclusion directly in CSS instead of adding extra classes everywhere.

Important detail

*:not(.printable) means:

• select every element
• except elements that themselves have class

Think of :not() like a filter at a doorway.

• Every element walks toward the doorway.
• The filter checks one rule.
• If the element matches the excluded rule, it is blocked.
• If it does not match the excluded rule, it gets through.

For example:

*:not(.printable)

is like saying:

"Let in every element except those wearing the printable badge."

An element is judged by its own badge, not by its parent’s badge.

The basic syntax is:

selector:not(condition)

Exclude a class

*:not(.printable) {
  color: gray;
}

This matches every element that does not have class printable.

Exclude an attribute

input:not([disabled]) {
  border: 1px solid green;
}

This styles only input elements that are not disabled.

Practical example for printing

@media print {
  *:not(.printable) {
    display: none;
  }
}

This hides all elements that do not have the printable class.

More specific version

Sometimes you only want to target certain elements:

 *() {
  : ;
}

Consider this HTML:

<div class="printable">Report</div>
<nav>Menu</nav>
<a href="#">Print</a>
<p class="printable">Important text</p>

And this CSS:

*:not(.printable) {
  background: yellow;
}

Step-by-step

1. CSS starts checking each element in the document.
2. For <div class="printable">, the element has class printable.
   • :not(.printable) fails.
   • The rule does not apply.
3. For <nav>, the element does not have class printable.

Here are common situations where :not() is useful:

Print styles

Hide navigation, buttons, and controls when printing:

@media print {
  .page *:not(.printable) {
    display: none;
  }
}

Form styling

Style all inputs except disabled ones:

input:not([disabled]) {
  background: white;
}

Navigation and UI exclusions

Apply spacing to all list items except the last one:

li:not(:last-child) {
  margin-bottom: 8px;
}

Content theming

Style all cards except featured cards differently:

.card:not(.featured) {
  opacity: 0.8;
}

Data tables

In real codebases, developers often use :not() in a few practical patterns.

1. Excluding special cases

Instead of creating many extra classes, developers often write one general rule and exclude special elements:

.button:not(.button-secondary) {
  background: blue;
  color: white;
}

2. Guarding styles

A rule can apply broadly while protecting elements that should behave differently:

input:not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
}

3. Print and export layouts

Pages often contain controls that should not appear in output:

@media print {
  .toolbar,
  .sidebar,
  .actions {
    display: none;
  }
}

Sometimes this is clearer than trying to hide everything with :not().

Mistake 1: Thinking :not(.printable) excludes children of .printable

Broken assumption:

<div class="printable">
  <span>Text</span>
</div>

*:not(.printable) {
  color: red;
}

Many beginners expect the span not to match. But it does match, because the span itself does not have class printable.

How to avoid this:

• remember that CSS matches each element individually
• if needed, write a more specific structure-based selector

Mistake 2: Using :not() too broadly

*:not(.printable) {
  display: none;
}

This can affect many more elements than expected, including layout wrappers and nested content.

Core syntax

:not(selector)

Common examples

:not(.printable)
input:not([disabled])
li:not(:last-child)
button:not(.secondary)

Match elements without a class

*:not(.printable)

Match elements without an attribute

input:not([disabled])

Important rule

:not() checks the current element, not its parent or children.

Useful reminders

• .printable = has class printable
• :not(.printable) = does not have class

Can CSS select elements that do not have a certain class?

Yes. Use the :not() pseudo-class:

:not(.printable)

How do I select all elements without the printable class?

Use:

*:not(.printable)

This matches every element that does not have that class.

Does :not(.printable) exclude children inside a .printable element?

No. It only checks the element being matched. A child inside .printable still matches if the child itself does not have the class.

Can I use :not() with attributes?

Yes. For example:

input:not([disabled])

This matches inputs that are not disabled.

Is *:not(.printable) a good idea for print CSS?

Sometimes, but it can be too broad. If you know which elements should be hidden, explicit selectors like are often easier to maintain.

• CSS selectors — :not() is part of the selector system used to target elements.
• Pseudo-classes — :not() is a pseudo-class, like :hover or :last-child.
• Class selectors — Understanding .printable is necessary before excluding it.
• Attribute selectors — :not() is often used with selectors like [disabled].
• Specificity — Combining :not() with other selectors affects how CSS rules win or lose.
• Descendant selectors — Useful when you need to control scope, such as body *:not(.printable).
• Print styles with @media print — A common real-world use case for exclusion selectors.
• CSS inheritance — Important when nested elements seem styled even if they were not directly matched.