How can I reference a nested component via CSS in Flex 3?

Question

Using CSS, how would I reference the Button component? FWIW, I'm using Flex 3.x SDK.

<mx:HBox id="myHBox" styleName="myHBox">
   <mx:Button label="Test"/>
</mx:HBox>

Answer 1

Apparently, this (amongst other things) is a limitation in Flex 3.x. Fortunately, it works as one would imagine in Flex 4:

http://butterfliesandbugs.wordpress.com/2008/10/23/new-css-selectors-are-supported-in-the-flex-4-trunk/

Answer 2

In flex 3.x you cannot access it via css without using a type selector like so:

Button{
  someProp:someVal;
}

but that would apply to every instance of the button class.

Flex 4.x has a better implementation of css selectors and you could access it via its parent like so:

#myHbox s|Button{
  someProp:someVal;
}