New CSS Selectors are supported in the Flex 4 trunk

It has been about a little over a week since the first check-ins for supporting descendant and id selectors were checked into the trunk. However, for a week, its been unusable unless you used the -keep compiler argument. As of build 3793, this functionality is turned on by default, so, you should be able to try out the newly supported CSS selectors. Pete Farland is the developer for this feature and I am testing it. Its definitely still in its alpha stages, but, feel free to give it a whirl.

Descendant Selectors: You can now specify styles for children of a container (at any level). In the following example, you will set styles for all Buttons within a Box or subclasses of either of these classes.

Box Button {  color: #DD0000;}

This will match :

– Buttons inside of a Box

– Buttons inside of a VBox or HBox

– CheckBoxes within a Box, VBox, or HBox

– Custom Components that extend Button that are inside a Box, VBox or HBox.

You can also do multiple level of descendants like:  Panel ViewStack Label { fontSize: 12; }

This will only match Labels inside a ViewStack that is inside a Panel.

ID Selectors: You can match a style to the id of a component.

#myRedComp { backgroundColor: #FF0000; }

The example above will match anything with an id of “myRedComp” and try to set its backgroundColor to red.

Combined Type and Class Selectors: While you could use type and class selectors in the past, you couldn’t use them together, now, you can.

Panel.startUpStyle { cornerRadius: 10; }

This style will match any Panel with a styleName set to “startUpStyle”.

You can also use any of these selectors in combination. Here are some other examples of supported selectors:

Button#submitButton { textDecoration: “underline”; }

TitleWindow Button#submitButton { textDecoration: “underline”; }

Application DateField.futureDateStyle {color: #746544; }

This feature is still under development and has had very little testing. You can see the current bugs or file new ones by searching under the feature “Styles” and look for the tag [Advanced CSS] in the subject. We’d love your feedback as to other selectors that you would like to see supported.

A feature that we are considering are type selectors associated with states. So, if you have something like:

Button:downState { fillColors: #FFFFFF; #FF0000;}

This would match any Button when it was in the currentState=’downState’. So far, this isn’t implemented in the build.

For more details on the feature, see the spec on our open source site:

6 responses

  1. Is Flex-CSS going to have selectors such as “Alternate elements”, “n-th element”, “first element”, “last element” e.t.c?

    they really do come in handy.

  2. would be great if some one could port the jquery css selector engine into flex. jquery just changed they way we do javascript in the web, its just amazing what one could do with few lines.

  3. wow, nice

  4. This topic looks great. For more Flex 4 and Flash Builder 4 information, see this new course ‘Flex 4 Top 10 Features’ taught by Rivello Multimedia Consulting. Sign up or request it come to your town today!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: