News for hackers. Stuff that matters.

A comment on CSS4 Preview – Selectors. Parent comment

Re:CSS4 Preview – Selectors by eCa on Tuesday March 06, 2012 @06:45PM (#3673482)
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.

[ Parent | on HN ]
Re:CSS4 Preview – Selectors by chrisbroadfoot on Tuesday March 06, 2012 @07:18PM (#3673606)
Right. I get it. Basically an infix notation. Seems inconsistent with the rest of CSS.
[ Parent | on HN ]
Re:CSS4 Preview – Selectors by driax on Wednesday March 07, 2012 @01:52AM (#3674584)
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).
[ Parent | on HN ]
Re:CSS4 Preview – Selectors by masklinn on Wednesday March 07, 2012 @07:20AM (#3675194)
> 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.

[ Parent | on HN ]