Question

I’m currently writing a CSS selector engine for server-side JS (have a look!). To have a solid foundation, I started using the tests of Qwery (an existing selector engine). There, I found a number of tests for “relationship-first queries”. Apparently, CSSselect (my project) doesn’t show the expected behavior, but I’m not sure what’s expected.

I already searched for documentation, but couldn’t find anything helpful. My current implementation interprets them as follows:

• > is equivalent to :not(:root)
• ~ and + are equivalent to :not(:first-child)
• whitespace at the beginning is ignored

Qwerys interpretation seems to differ, but is there anything official?

Answer 1

No. You might have a look at http://www.w3.org/TR/CSS21/selector.html and http://www.w3.org/TR/css3-selectors/ (CSS3).

• > ≠ :not(:root). :root means document root, so your “equal” would be true for every but one element. Instead, it is the [direct] child combinator.
• ~ ≠ :not(:first-child) ≠ +. Mostly because ~ and + are different from each other, and equivalence is transitive. Both are sibling combinators, the one general and the other for adjacent ones.
• The whitespace should be ignored, I guess. What else would it represent? The descendant combinator needs two simple selectors around it. You also might be interested in The grammar of Selectors.

Of course a child combinator implicates that the child is not the document root, and an adjacent combinator implicates that the sibling is not the first child.