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 Go Make Things membership is the best way to support my work and help me create more free content.
Cheers,
Chris
Want to share this with others or read it later? View it in a browser.
0 Komentar untuk "[Go Make Things] The CSS :not() pseudo-class"