Stop Rewriting Your CSS! Use :not() Instead
A guide to :not() pseudo-class, showcasing several practical use-cases.
A guide to :not() pseudo-class, showcasing several practical use-cases from excluding first/last children from the selection to combining :not() with :has() for some powerful effects—all of which will help you simplify your CSS.
Chapters
- 00:00 Intro & demo setup
- 01:43 How to exclude first and last items from your selection (:first-child)
- 05:25 How to exclude first-sibling from your selection
- 07:39 How to exclude elements with a certain state (active menu item)
- 09:10 How to simplify selectors for modal dialogs (open/closed states)
- 10:03 How to highlight all elements that are not in a state of hover
- 11:59 How to use :not() to style CMS-generated content
- 13:30 How to use :not() for debugging to highlight all images without an alt attribute
- 14:57 How not to use :not() pseudo-class example
- 15:39 Conclusion and a question for you
Demos
PS. A massive thanks to everyone who shared their :not() examples: Jacob Rask, Rodrigo Noales, Daniel Yuschick, Temani Afif, Kevin Powell, Mike Mai, Álvaro Montoro, Lucas Bonomi, Jake Gonzales, Josh Squire, Christian Schaefer, Philipp Rudloff, Mark Boots, Jhey Tompkins, Martin (Script Raccoon), Silvestar Bistrović, Junaid Gandhi, Pawel Grzybek, Peer Raynders, Grace Snow, Ste Greig, Luke Shafer, Stéphane Dubois, Romain Menke, Steve Griffith, Jeremy Moss, Jad Joubran, Raffi Keklikian, Jeremy Moss. 🙏
