3 ms·

Why not? The figure example seems like a perfectly valid use-case. How else would you do something like that? Edit; I actually had a use case were I was buildi

Why not? The figure example seems like a perfectly valid use-case. How else would you do something like that? Edit; I actually had a use case were I was building an expanding menu, without JavaScript, it involved a ~ and > selector on a checkbox to get that to work. The :has selector would’ve made it straight forward.

jeroenhd 4y ago
When you use "has()" you can be pretty sure that you also have the context to just use a class name. Using CSS to traverse a tree of elements rather than structure the elements in a way to make your CSS makes sense just feels like backwards design to me. Your CSS should describe how the HTML looks, it shouldn't be trying to figure out what you did to the poor DOM tree to find the right style to apply.
- samwillis 4y ago
  I think the article shows brilliant examples of where that isn’t really possible, and uses where it replaces JavaScript. It also stops you needing to repeat yourself, the figure example for example with your suggestion would need both a class and a caption tag. Also going back to the roots of CSS, :has() is ideal for semantic markup where you don’t want or need to use excessive class names. Obviously with class heavy frameworks and methodologies that are in vogue :has() is less relevant. There is more than one way to use CSS. > Your CSS should describe how the HTML looks That’s literally what :has() does, based on the structure of the document.
- woutr_be 4y ago
  Maybe i’m either misinterpreting you, or misunderstanding the article, but figure:has(figurecaption) perfectly describes a valid DOM tree, it’s not trying to do anything weird. I’m sure it can be abuses, just like anything else.
- Cyberdog 4y ago
  You have a point, but there are cases where designers are doing something like styling CMS output and either don't have the skills or the possibility of doing something like adding classes conditionally to its output. Or perhaps asking a developer something like "Hey, can you add a class to X whenever it contains Y?" involves filing a ticket and waiting patiently for stakeholders to decide if and when it's necessary enough to devote developer resources to. And at any rate, removing classes and IDs as much as possible and just having a page full of semantic tags is generally a goal for a certain school of web development.

jeroenhd 4y ago

When you use "has()" you can be pretty sure that you also have the context to just use a class name. Using CSS to traverse a tree of elements rather than structure the elements in a way to make your CSS makes sense just feels like backwards design to me. Your CSS should describe how the HTML looks, it shouldn't be trying to figure out what you did to the poor DOM tree to find the right style to apply.

samwillis 4y ago
I think the article shows brilliant examples of where that isn’t really possible, and uses where it replaces JavaScript. It also stops you needing to repeat yourself, the figure example for example with your suggestion would need both a class and a caption tag. Also going back to the roots of CSS, :has() is ideal for semantic markup where you don’t want or need to use excessive class names. Obviously with class heavy frameworks and methodologies that are in vogue :has() is less relevant. There is more than one way to use CSS. > Your CSS should describe how the HTML looks That’s literally what :has() does, based on the structure of the document.
woutr_be 4y ago
Maybe i’m either misinterpreting you, or misunderstanding the article, but figure:has(figurecaption) perfectly describes a valid DOM tree, it’s not trying to do anything weird. I’m sure it can be abuses, just like anything else.
Cyberdog 4y ago
You have a point, but there are cases where designers are doing something like styling CMS output and either don't have the skills or the possibility of doing something like adding classes conditionally to its output. Or perhaps asking a developer something like "Hey, can you add a class to X whenever it contains Y?" involves filing a ticket and waiting patiently for stakeholders to decide if and when it's necessary enough to devote developer resources to. And at any rate, removing classes and IDs as much as possible and just having a page full of semantic tags is generally a goal for a certain school of web development.