Post #389684

2026-02-20 16:54 UTC

So I was reading the new #CSS selectors level 5 draft, like one does, and what do I see? `label /for/ input` will let us select the input referenced by a label&#39;s for attribute? I don&#39;t have a good use case right now, usually `label + input` or `label &gt; input` does the trick, but still… very cool to have the option. Interested to see what other use cases people come up with. https://www.w3.org/TR/2026/WD-selectors-5-20260217/#combinators

Replies (3)

@chriskirknielsen@front-end.social 2026-02-20 17:10

Local link seems interesting as well for anyone adding icons to external sites. `a:not(:local-link)::after { content: ' ↗️'; }` And there' a functional notation to match the current subfolder? That's wild. Again, not a lot of use-cases racing through my mind (maybe it could be helpful in a blog sidebar if your permalinks are /yyyy/mm/dd to highlight an archive list for the current month/year), but I still find it very interesting to have the option! https://www.w3.org/TR/2026/WD-selectors-5-20260217/#local-pseudo

Open ##1522490
@AmeliaBR@front-end.social 2026-02-20 17:34

@chriskirknielsen I see the benefit of the hover styles for a label triggering highlight on , but the selector I think is more useful is to select the label based on properties of the associated form element (like focus, required, invalid, etc.) without needing to worry about DOM structure. So that would be more like a label:for() Feature request on the spec : https://github.com/w3c/csswg-drafts/issues/1067 (The label itself should never be focused, so that's a problem with the spec example).

Open ##1522496
@cwilcox808@c.im 2026-02-20 20:21

@chriskirknielsen I'm a little unclear on the scope of the "reference combinator." `label /for/ input` is one example but would `button.menu /commandfor/ dialog` work to style a dialog opened using a particular button? Could `[role="tab"][aria-selected="true"] /aria-controls/ [role="tabpanel"]` show a tabpanel based on selection of its tab?

Open ##1522499