specific implementations of css selector engines

Question

It is wide known that overusing id css rules considered to be a bad practice. There are bunch of posts written on this topic - here is one of the latest, for example.

In such posts it is often mentioned that css selectors are actually parsed by browser engines from right to left. That is, if we, say, have selector #very div then, browser first find all divs, then test them for having parent with this very id.

My question consists of two related parts. First part - is it really true? There are lot of implementations of css engines, both opensourced and proprietary, it would be nice if somebody who knows something about any of these engines, shed the light on this topic.

Second part of question is - if it true, if we really always parsing css rules from right to left, why we actually doing so? I am not a parsing expert at all, but wouldn't it be more handy to define which part of selector is more specific (generates lesser output) and to start filtering not necessarily from right? Is it too pricey or something?

Ummm, no, #very div finds divs and searches up their document trees for an element with ID "very". — BoltClock
– BoltClock, Commented Jul 20, 2011 at 14:18
@BoltClock about what exactly css engine/engines are you talking? Besides, there is a second part of the question ) — shabunc
– shabunc, Commented Jul 20, 2011 at 14:20
Related: stackoverflow.com/questions/5797014/… and stackoverflow.com/questions/3851635/css-combinator-precedence — BoltClock
– BoltClock, Commented Jul 20, 2011 at 15:13
@BoltClock Oh, I see. No,actually, I'm not, but I've edited my question to be more clear. — shabunc
– shabunc, Commented Jul 20, 2011 at 15:14

Litek · Accepted Answer · 2011-07-20 10:44:18Z

0

Seteve Sounders did some tests a while ago and while his test confirm this (at least for tested browsers) it also shows the scale of performance gains. For 6000 dom elements the maximum performance boost using classes vs descendant was 200ms (quite significant) with average being way smaller (and way less significant).

This test also shows that while there are differences between browsers and engines (interestingly ie performance best) the trend is the same.

answered Jul 20, 2011 at 10:44

Litek

4,8782 gold badges26 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shabunc Over a year ago

@Litek, very useful information, indeed, nevertheless, not an answer to both part of the question.

Collectives™ on Stack Overflow

specific implementations of css selector engines

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related