How and when are CSS rules applied to a display hierarchy?

Question

Is there an open source or generic implementation of CSS that can be applied to an arbitrary display hierarchy? I'm trying to build one for the Flash display hierarchy in AS3.

I'm curious about the procedure used to apply CSS styles to a display hierarchy. It seems to me that some or all selectors would have to be re-applied to the entire display list every time a display object is added, removed, or repositioned, as well as when events occur such as focus changes, given the existence of selectors like "first-child" and pseudo-selectors like ":focus".

Would the initial application of styles involve scanning the entire display list one element at a time, applying styles, or would all objects be sorted up-front and associated with particular rule categories? Or something like that.

I'm really looking for a good general resource on a real implementation.

Update: I'm probably looking for something at the level of this, but I don't know if this is state of the art: "Hierarchical constraints provide a simple, unifying way of understanding much of the CSS 2.0 specification. This viewpoint also suggests that constraint solvers provide a natural implementation technique. Each style property and the placement of each element in the document can be modeled by a variable. Constraints on these variables arise from browser capabilities, default layout behavior arising from the type of the element, from the document tree structure, and from the application of style rules. The final appearance of the document is determined by finding a solution to these constraints." Which begs the question of how and when to solve the constraints.

Answer 1

@Triynko, regarding How Browsers Work at HTML5 Rocks:

Damn...

WebCore simply throws a global switch when any sibling selector is encountered and disables style sharing for the entire document when they are present. This includes the + selector and selectors like :first-child and :last-child.

That's one way to handle it, sledghammer to kill a fly, I'll remember not to use those selectors, ever, lol.

Very useful:

After parsing the style sheet, the rules are added to one of several hash maps, according to the selector. There are maps by id, by class name, by tag name and a general map... If the selector is an id, the rule will be added to the id map, if it's a class it will be added to the class map etc. This manipulation makes it much easier to match rules. There is no need to look in every declaration: we can extract the relevant rules for an element from the maps. This optimization eliminates 95+% of the rules, so that they need not even be considered during the matching process(4.1).

And @BoltClock:

In general, complex selectors are matched from right to left (secondary to these optimizations of course), evaluating each sequence of simple selectors and stepping through each combinator in doing so.

References

• Discover the power of CSS and Flex

• Why do browsers match CSS selectors from right to left?

• How Browsers Work: Style Computation

• Apache Flex: mx.styles package

• JavaFX: Styling UI Controls with CSS (Release 8)