Awesome CSS :has

A collection of awesome materials, that level up your CSS skills with the pseudo-class :has.

Introduction

• :has(): the family selector — the article by Jhey Tompkins on developer.chrome.com
• Using :has() as a CSS Parent Selector and much more — the article by Jen Simmons on webkit.org
• Level Up Your CSS Skills With The :has() Selector — the article by Stephanie Eckles on smashingmagazine.com
• CSS :has() — the article by Estelle Weyl on 12daysofweb.dev
• CSS :has Parent Selector — the article by Ahmad Shadeed on ishadeed.com
• CSS :has A Parent Selector And It Is Better Than I Ever Could Have Hoped For — the article on blog.webdevsimplified.com
• The CSS :has() selector is way more than a “Parent Selector” — the article by Bramus on bram.us

Use cases

• Detect “islands of elements” with the same class, thanks to CSS :has() — the article by Bramus on bram.us
• Selecting previous siblings with CSS :has() — the article by Tobias Ahlin on tobiasahlin.com
• Create a Direction Aware Hover Effect Using CSS :has() Selector — the video by CSS Weekly on youtube
• Style a parent element based on its number of children using CSS :has() — the article by Bramus on bram.us
• Hiding empty elements with CSS :empty and :has() — the article by Tobias Ahlin on tobiasahlin.com
• Practical Use Cases for :has() Pseudo-Class — the video by CSS Weekly on youtube
• :has(:not()) vs. :not(:has()) — the article by Manuel Matuzović on matuzo.at