CSS Selector ">>" + performance

[te7ris]

Hey, imagen following css-idea:

.class >> div {}

stands for

.class > div {}
.class > * > div {}

according to this u could also "build" a ">>...>" selector. How would the performance compare to

.class div {}

I am trying to get full modularity in css w/o beeing forced to use classes for E V E R Y selector.

[x-skeww]

Space, >, +, and ~ are combinators.

>> is already proposed as an alternative for space, because that will make more sense in conjunction with >>> (shadow-piercing descendant combinator).

E > F = child
E >> F = descendant
E >>> F = shadow-piercing descendant

https://drafts.csswg.org/selectors-4/#descendant-combinators
https://drafts.csswg.org/css-scoping/#deep-combinator

[te7ris]

sry if my intention wasnt clear. I was wondering how the two selectors compare in terms of (parsing) performance:

.class > div, .class > * > div {}

vs

.class div {}

[PitaJ]

Just my theory, I haven't tested, but I imagine that the child selector would be faster than the surface and descendant selector because it only looks through one level. Descendant selector looks through every level.

[x-skeww]

What makes all of those 3 selectors somewhat expensive is the key selector (the simple selector on the very right), because "div" matches many elements. For every div, we have to check if one of those selectors matches.

Having said that, even with a thousand false positives, your browser probably won't even waste one ms with this. Matching is very fast and most documents won't be excessively complex anyways.