DEV Community

Discussion on: Why I can't wait for the :has() pseudo-class in CSS

View post
Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman • • Edited

It also more convenient to make custom checkbox/radio without extra markup.

label:has(input[type="checkbox"])::before {}
label:has(input[type="checkbox"]:checked)::before {}
Enter fullscreen mode Exit fullscreen mode 
<label>
  <input type="checkbox">
  Yo!
</label>
Enter fullscreen mode Exit fullscreen mode

Another idea is to add dropdown arrow automatically to menu items that have submenu in it.

nav li:has(ul) > a::after {
  /* add dropdown menu arrow here */
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
cchana profile image
Charanjit Chana •

It will be a game changer. For me it will mean leaner HTML and fewer server side decisions that need to be made just to decide if an element should be styled a certain way or not.