3 ms·

I like the $ syntax. It's powerful. Can somebody explain the slash syntax in the example given? label:matches(:hover, :focus) /for/ input {

cleverjake 15y ago
"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."
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 ago
  Right. I get it. Basically an infix notation. Seems inconsistent with the rest of CSS.
  - driax 15y ago
    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).
  - 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.
tlb 15y ago
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.
- snookca 15y ago
  Exactly. And just because there's a draft specification, doesn't mean browsers will implement it.
- masklinn 15y ago
  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.
  - deleted 15y ago
    [deleted]
  - masklinn 15y ago
    s/left-to-right/right-to-left/ of course

cleverjake 15y ago

"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."

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 ago
Right. I get it. Basically an infix notation. Seems inconsistent with the rest of CSS.
- driax 15y ago
  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).
- 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.

tlb 15y ago

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.

snookca 15y ago
Exactly. And just because there's a draft specification, doesn't mean browsers will implement it.
masklinn 15y ago
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.
- deleted 15y ago
  [deleted]
- masklinn 15y ago
  s/left-to-right/right-to-left/ of course