Advanced CSS in Flex 4 - ID and Descendant Selectors

NOTE: View my comment below for updated code on making this work with the latest SDK (as of 5/25/09).

A few days ago one of the commit messages in the Gumbo trunk mentioned some work for advanced CSS was beginning. I tried to create an example of using a descendant selector as well as an ID selector, but neither worked.

Tonight, another commit message said that this was now in place by default (I guess it would have worked earlier, but I needed to be specify a compiler argument). But now, after rebuilding the latest checkout of Gumbo you should now be able to compile the following example to see the advanced CSS selectors working. Below is the SWF (you'll need Flash Player 10 to view it) and the code follows:

[flash http://blog.smartlogicsolutions.com/wp-content/uploads/2008/10/CSSExample.swf]

CSSExample.mxml

<?xml version="1.0" encoding="utf-8"?>
<FxApplication xmlns="http://ns.adobe.com/mxml/2009">

    <layout><VerticalLayout /></layout>

    <Style source="descendants.css" />

    <VGroup>
        <TextView>Text in a VGroup</TextView>
    </VGroup>

    <HGroup>
        <TextView id="red">Text in an HGroup</TextView>
    </HGroup>

</FxApplication>

Standard so far, now let's see the CSS with the advanced selectors:

descendants.css

VGroup TextView {
    font-size: 24pt;
}

HGroup TextView {
    text-decoration: underline;
}

#red {
    color: #ff0000;
}

Flex 4 is now fully demonstrating the Cascading part of CSS. (You may need to review CSS selectors syntax.) NOTE: I don't know how much of the CSS spec is going to be supported in Flex 4, and am not suggesting that everyone of the selectors at the CSS selectors page will be available in Flex 4.

The VGroup TextView selector targets any TextView instances which are a child of a VGroup. #red selector targets instances with an ID of "red".

As usual, here is the bundled source and SWF.

I hope everyone’s enjoying their Gumbo!