The CSS :not() pseudo-class

Today, I wanted to look at a really handy modern CSS feature: the :not() pseudo-class.
Let’s dig in!
What :not() does The :not() pseudo-class can be used to select elements that do not match one or more selectors.
You can use it by itself or on an element. Pass in the selectors to exclude as a comma-separated list.
/** * Will style all paragraphs to be bold * EXCEPT those with the .


This content originally appeared on Go Make Things and was authored by Go Make Things

Today, I wanted to look at a really handy modern CSS feature: the :not() pseudo-class.

Let’s dig in!

What :not() does

The :not() pseudo-class can be used to select elements that do not match one or more selectors.

You can use it by itself or on an element. Pass in the selectors to exclude as a comma-separated list.

/** 
 * Will style all paragraphs to be bold
 * EXCEPT those with the .boring and .plain classes
 */
p:not(.boring, .plain) {
	font-weight: bold;
}

A practical example

For example, let’s say you have a class to style links to look like buttons.

.btn {
	background-color: rebeccapurple;
	border: 0;
	border-radius: 0.25em;
	color: white;
	font-size: 1rem;
	font-weight: normal;
	padding: 0.5em 0.8rem;
	text-decoration: none;
}
<!-- Looks like a button -->
<a class="btn" href="/sign-up">Sign Up</a>

But you also have your links styled to go bold when hovered.

a:hover {
	font-weight: bold;
}

Because of the cascade, the .btn element will also show as bold when hovered over.

Here’s a demo.

We can use the :not() pseudo-class to exclude .btn elements from our link :hover styles…

a:not(.btn):hover {
	font-weight: bold;
}

Here’s an updated demo.

More on selectors

I’ve added this tutorial, as well as CSS selector basics, advanced attribute selectors, and information on the cascade and specificity to my Go Make Things members area.

If you’re not a member, you can join for as little as $3/month.

And if you don’t want to join, you can find most of that same content right here on this website using the search feature.

Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.


This content originally appeared on Go Make Things and was authored by Go Make Things


Print Share Comment Cite Upload Translate Updates
APA

Go Make Things | Sciencx (2025-03-12T14:30:00+00:00) The CSS :not() pseudo-class. Retrieved from https://www.scien.cx/2025/03/12/the-css-not-pseudo-class/

MLA
" » The CSS :not() pseudo-class." Go Make Things | Sciencx - Wednesday March 12, 2025, https://www.scien.cx/2025/03/12/the-css-not-pseudo-class/
HARVARD
Go Make Things | Sciencx Wednesday March 12, 2025 » The CSS :not() pseudo-class., viewed ,<https://www.scien.cx/2025/03/12/the-css-not-pseudo-class/>
VANCOUVER
Go Make Things | Sciencx - » The CSS :not() pseudo-class. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/03/12/the-css-not-pseudo-class/
CHICAGO
" » The CSS :not() pseudo-class." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2025/03/12/the-css-not-pseudo-class/
IEEE
" » The CSS :not() pseudo-class." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2025/03/12/the-css-not-pseudo-class/. [Accessed: ]
rf:citation
» The CSS :not() pseudo-class | Go Make Things | Sciencx | https://www.scien.cx/2025/03/12/the-css-not-pseudo-class/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts