3 ms·
Consider the following html: <label for="first_checkbox">A label</label> <input type="checkbox" id="first_checkbox" /> <label for="another_checkbox">Ano
by eCa 15y ago
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.
- chrisbroadfoot 15y agoRight. I get it. Basically an infix notation. Seems inconsistent with the rest of CSS.
- driax 15y agoWell 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).
- masklinn 15y ago> 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.