Four selectors : CSS Selector « Style « Flex

1. Flex
2. Style
3. CSS Selector

Four selectors

         

<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->



    <!-- styles/CSSDescendantSelectorExample.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        s|Button {
            fontSize:16;
        }
        s|VGroup s|Button {
            color:red;
        }
        s|VGroup s|HGroup s|Button {
            color: blue;
        }
        s|VGroup s|VGroup s|Button {
            color: green;
        } 
    </fx:Style>
    <!-- This button has a fontSize of 16. -->
    <s:Button label="Click Me" />
    <s:VGroup>
        <!-- This button is red, and has a fontSize of 16. -->
        <s:Button label="Click Me, Too" />
    </s:VGroup>
    <s:VGroup>
        <s:HGroup>
            <!-- This button is blue, and has a fontSize of 16. -->
            <s:Button label="Click Me, Also" />
        </s:HGroup>
    </s:VGroup>
    <s:VGroup>
        <s:VGroup>
            <!-- This button is green, and has a fontSize of 16. -->
            <s:Button label="Click Me, Click Me!" />
        </s:VGroup>
    </s:VGroup>
</s:Application>

   
    
    
    
    
    
    
    
    
  

Related examples in the same category

1.	Applying behaviors in MXML using styles type selector
2.	Class selector names must start with a period when using getStyleDeclaration()
3.	Using compound selectors
4.	Selector precedence between style name and style name with namespace
5.	Define a class and a type selector in the tag:
6.	Define textDecoration, a noninheriting property, to the global selector
7.	Use getStyleDeclaration() to apply the styles with the global selector
8.	Set new class selectors on different targets
9.	Define a class selector and a type selector in the tag
10.	Using class selectors for axis styles
11.	Defines colors for each of the series by setting the value of the fill style property in the custom class selectors:
12.	Define a class selector
13.	Style class selector on different targets
14.	Define multiple style properties in each selector by separating each property with a semicolon
15.	Type Selector Inheritance
16.	Class selector names must start with a period when you access them with the getStyleDeclaration() method
17.	Compound Selectors
18.	An id selector
19.	SubComponent Styles Selector
20.	A class and a type selector in the tag:
21.	Global Type Selector
22.	Use getStyleDeclaration() method to apply the styles with the global selector example shows