Uploaded May 2023 | Updated September 2026, 1 hour ago
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.
π Links
Codepen :not() Demo: codepen.io/ZoranJambor/pen/zYmjOjK/b9fb624e7a16aa5c0009398c655c4243
Codepen :has() Demo: codepen.io/ZoranJambor/pen/OJQPwVZ
My tweet: twitter.com/CSSWeekly/status/1658248747287969792
Guide to logical CSS properties: youtu.be/cV9JhEV4Ll0
Practical use-cases for :has() pseudo-class: youtu.be/ljD_ENTYuB8
β
Kevin Powellβs Channel: youtube.com/@KevinPowell
Script Raccoonβs Channel: youtube.com/@ScriptRaccoon
Steve Griffith's Channel: youtube.com/@SteveGriffith-Prof3ssorSt3v3
You want enabling CSS selectors, not disabling ones: https://www.silvestar.codes/articles/you-want-a-single-enabling-selector-not-the-one-that-disables-the-rule-of-the-previous-one/
CSS Tip Project: css-tip.com
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. π
π Timestamps
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
Become PRO with the best linting tools in the industry:
π₯ Mastering Prettier & Stylelint: masteringlinting.com
Subscribe to CSS Weekly Newsletter:
π css-weekly.com
Keep up-to-date with CSS Weekly:
π Twitter: twitter.com/CSSWeekly
π Instagram: instagram.com/cssweekly
π Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
π Blog: zoranjambor.com
π Twitter: twitter.com/zoranjambor
π LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #cssselectors
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.
π Links
Codepen :not() Demo: codepen.io/ZoranJambor/pen/zYmjOjK/b9fb624e7a16aa5c0009398c655c4243
Codepen :has() Demo: codepen.io/ZoranJambor/pen/OJQPwVZ
My tweet: twitter.com/CSSWeekly/status/1658248747287969792
Guide to logical CSS properties: youtu.be/cV9JhEV4Ll0
Practical use-cases for :has() pseudo-class: youtu.be/ljD_ENTYuB8
β
Kevin Powellβs Channel: youtube.com/@KevinPowell
Script Raccoonβs Channel: youtube.com/@ScriptRaccoon
Steve Griffith's Channel: youtube.com/@SteveGriffith-Prof3ssorSt3v3
You want enabling CSS selectors, not disabling ones: https://www.silvestar.codes/articles/you-want-a-single-enabling-selector-not-the-one-that-disables-the-rule-of-the-previous-one/
CSS Tip Project: css-tip.com
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. π
π Timestamps
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
Become PRO with the best linting tools in the industry:
π₯ Mastering Prettier & Stylelint: masteringlinting.com
Subscribe to CSS Weekly Newsletter:
π css-weekly.com
Keep up-to-date with CSS Weekly:
π Twitter: twitter.com/CSSWeekly
π Instagram: instagram.com/cssweekly
π Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
π Blog: zoranjambor.com
π Twitter: twitter.com/zoranjambor
π LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#css #cssselectors
