How CSS and DOM is implemented in the browser?

Question

This is a pretty academic question. I'm wondering how the browser is implemented as in what data structure or algorithm is used to map a CSS selector to a particular DOM element. Is it accomplished through a hash table? How does DOM child node knows that the style applied to parent also applies to itself etc. I've been looking at Mozilla developer center and haven't found anything. Any documentations or books on the subject would be much appreciated... thanks!

Answer 1

Matching answers question "which selectors match given node", not "which nodes match a selector". This lets you simply evaluate each part of a selector against current node (compare node name/ID/class). Decendant combinator and inheritance are done through scanning of parent nodes.

If you're interested what happens next, WebKit blog had nice series: WebCore rendering basics

Answer 2

You mention Mozilla. It is certainly easier answer your question in the context of a particular concrete implementation, rather than the abstract notion of all possible implementations.

[W]hat data structure or algorithm is used to map a CSS selector to a particular DOM element ... is it accomplished through a hash table?

I suppose the direct answer to your question, for FF2, is likely to be in the style directory of the firefox source code. A search within that directory for "hashtable" yields 111 results in 7 files.

I feel confident that hashtables are broadly associated with some of the processes involved in rendering CSS styles.

So the short answer to your question is, "Yes, but there's more to it than just hash tables."

Answer 3

So here are the scarce docs:

• http://www.mozilla.org/newlayout/doc/style-system.html
• https://developer.mozilla.org/en/Mozilla_Style_System

From your question it seems that you should first learn more about how CSS is supposed to work (e.g. what is rule specificity, computed style).