StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POWhy do browsers match CSS selectors from right to left?
text
Body
copied!<p>CSS Selectors are matched by browser engines from right to left. So they first find the children and then check their parents to see if they match the rest of the parts of the rule.</p> <ol> <li>Why is this?</li> <li>Is it just because the spec says?</li> <li>Does it affect the eventual layout if it was evaluated from left to right?</li> </ol> <p>To me the simplest way to do it would be use the selectors with the least number of elements. So IDs first (as they should only return 1 element). Then maybe classes or an element that has the fewest number of nodes — e.g. there may only be one span on the page so go directly to that node with any rule that references a span.</p> <p>Here are some links backing up my claims</p> <ol> <li><a href="http://code.google.com/speed/page-speed/docs/rendering.html" rel="noreferrer">http://code.google.com/speed/page-speed/docs/rendering.html</a></li> <li><a href="https://developer.mozilla.org/en/Writing_Efficient_CSS" rel="noreferrer">https://developer.mozilla.org/en/Writing_Efficient_CSS</a></li> </ol> <hr> <p>It sounds like that it is done this way to avoid having to look at all the children of parent (which could be many) rather than all the parents of a child which must be one. Even if the DOM is deep it would only look at one node per level rather than multiple in the RTL matching. <a href="https://stackoverflow.com/questions/4130045/is-it-easier-faster-to-parse-css-selectors-ltr-or-rtl">Is it easier/faster to evaluate CSS selectors LTR or RTL?</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload