Here are 10 hot tips for using CSS :has() 👉🏻
1: CSS :has() Basics Select an element based on its children. Handy when you want to style a parent differently when it contains media.
2: The anywhere selector! When The body has a checkbox checked, you can grab literally any other element in the body and style it. Useful for toggling settings without JS.
3: The Previous Element Selector! Grab the item before the selected item. Never before (heh) possible!
4: Layout Targeting! I use this in my slide decks. Based on the contents of the slide, I can create a few commonly used layouts.
Adding or removing elements will automatically change the layout.
- Form Validation Styling. Style the label, fieldset or wrapping element based on the validation of the input.
You can pair this with the previous element selector as well if your label and inputs are siblings.
-
All Siblings! When you are hovering a child, select all the siblings, but not the hovered one. Useful if you want to focus or scale up an element while dimming the rest. Works well table rows too!
-
Quantity Queries. When a parent has more than 5 children, style it differently.
Perhaps you want to add CSS mask and fade out the rest of the items.
- Empty Children Select the parent when it's children are empty.
Maybe you want to show skeleton loaders, or flag an element for debugging?
-
Nested dropdown navs. Add a ↓ when there is a dropdown available.
-
Attribute Selectors! Style the parent based on it's child file type!