The css :not() pseudo-selector

I don’t work with CSS much, but whenever I do, I’m continually blown away by how much easier modern CSS is now than it was five years ago.
I was working on a side-project this weekend, and the :not() pseudo-selector made my life a lot easier!
What the :not() pseudo-selector does The :not() pseudo-selector lets you select elements, but exclude ones that match an additional set of selectors. Pass in the selectors to ignore as an argument.


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

I don’t work with CSS much, but whenever I do, I’m continually blown away by how much easier modern CSS is now than it was five years ago.

I was working on a side-project this weekend, and the :not() pseudo-selector made my life a lot easier!

What the :not() pseudo-selector does

The :not() pseudo-selector lets you select elements, but exclude ones that match an additional set of selectors. Pass in the selectors to ignore as an argument.

For example, this will make links purple, but not ones with the .not-purple class.

a:not(.not-purple) {
	color: rebeccapurple;
}
<a href="#">I will be purple</a>
<a class="not-purple" href="#">I will be my normal color</a>

A practical example

For example, my side-project has .app-logged-in and .app-logged-out classes that show or hide elements depending on whether the parent html element has the .is-logged-in class on it.

Historically, it looked like this.

.is-logged-in .app-logged-out,
.app-logged-in {
	display: none;
}

.is-logged-in .app-logged-in {
	display: block;
}

Here, I’m setting my elements to not display, then forcing them to display again when certain conditions are met.

Using :not(), I can simply this pattern. Instead of hiding the .app-logged-in element by default, and showing it if .is-logged-in is present, I can hide it only if the .is-logged-in class is not present on the html element.

.is-logged-in .app-logged-out,
html:not(.is-logged-in) .app-logged-in {
	display: none !important;
}

Modern CSS continues to amaze me!


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 (2021-10-25T14:30:00+00:00) The css :not() pseudo-selector. Retrieved from https://www.scien.cx/2021/10/25/the-css-not-pseudo-selector/

MLA
" » The css :not() pseudo-selector." Go Make Things | Sciencx - Monday October 25, 2021, https://www.scien.cx/2021/10/25/the-css-not-pseudo-selector/
HARVARD
Go Make Things | Sciencx Monday October 25, 2021 » The css :not() pseudo-selector., viewed ,<https://www.scien.cx/2021/10/25/the-css-not-pseudo-selector/>
VANCOUVER
Go Make Things | Sciencx - » The css :not() pseudo-selector. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/10/25/the-css-not-pseudo-selector/
CHICAGO
" » The css :not() pseudo-selector." Go Make Things | Sciencx - Accessed . https://www.scien.cx/2021/10/25/the-css-not-pseudo-selector/
IEEE
" » The css :not() pseudo-selector." Go Make Things | Sciencx [Online]. Available: https://www.scien.cx/2021/10/25/the-css-not-pseudo-selector/. [Accessed: ]
rf:citation
» The css :not() pseudo-selector | Go Make Things | Sciencx | https://www.scien.cx/2021/10/25/the-css-not-pseudo-selector/ |

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