Consider the following html:

  <label for="first_checkbox">A label</label>
  <input type="checkbox" id="first_checkbox" />

  <label for="another_checkbox">Another label</label>
  <input type="checkbox" id="another_checkbox" />

And css:

  label:matches(:hover, :focus) /for/ input {
      margin: 30px;
  }

If the user then hovers the first label (for="first_checkbox") the input (id="first_checkbox") will get an annoying margin.

The syntax uses the id named in the for-attribute to connect with the element with the same id.

Right. I get it. Basically an infix notation. Seems inconsistent with the rest of CSS.

Well every other operator is infix, so it's not really that inconsistent. " " (space) selectes descendents, ">" selects children, "+" selectes next-siblings and so on. The weird feeling of "/{attr}/" is probably just that the operator is variabel on the name of the attribute, which can't be avoided by any syntax (given that is part of the needed semantics).

> Seems inconsistent with the rest of CSS.

Not really, although it's a bit weird the `//` operator is a relation (like the space, or `>`). It "just" works sideways (and potentially upwards) instead of selecting strictly downwards.

It's easy to cook up a syntax for selecting parents. The hard part is implementing it efficiently. It requires browsers to scan more of the DOM tree when elements are changed. I expect it to be one of the (many) parts of CSS that are avoided by websites that want to render quickly.

I'm not sure, CSS selectors are already matched left-to-right so you're not scanning more stuff, it's just that you're selecting an other level of your match tree.

    ul > li > p

    ul > $li > p

have the same matching complexity: the browser finds all p on the page, then checks if their parent is a li, then checks if that parent is a ul. The difference (which may or may not require significant work) is that before the check acted as a filter on the originally matched object, whereas now there's a transform/translation.

s/left-to-right/right-to-left/ of course

Exactly. And just because there's a draft specification, doesn't mean browsers will implement it.

"The example above highlights an INPUT element when its LABEL is focused or hovered-over; the association is made by the for attribute of the label. As you can probably tell, the id is implied by the LABEL element's for attribute."