Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/warappa/XamlCSS/wiki/Nested-Css-Selectors below:

Nested Css Selectors · warappa/XamlCSS Wiki · GitHub

Supported Version: 2.0.0-pre1 or higher

Nested selectors allow you to reflect the hierarchal structure of your controls in css.

Instead of writing

.header {
    BackgroundColor: Red;
}

Button {
    BackgroundColor: Blue;
}

.header Button {
    BackgroundColor: Green;
}

you can write

Button {
    BackgroundColor: Blue;
}

.header {
    BackgroundColor: Red;
    
    Button {
        BackgroundColor: Green;
}

The ampersand-selector inserts the previous parent-selectors into the current selector. I.e. if you want to achive a selector .header Button.active just use the &.active under the Button selector.

The following sample defines that a Button with a class active contained in a .header should have a bold text:

Button {
    BackgroundColor: Blue;
}

.header {
    BackgroundColor: Red;
    
    Button {
        BackgroundColor: Green;
        
        &.active {
            FontAttributes: Bold;
        }
}

compiles to

.header {
    BackgroundColor: Red;
}

Button {
    BackgroundColor: Blue;
}

.header Button {
    BackgroundColor: Green;
}

.header Button.active {
    FontAttributes: Bold;
}

Since 2.1.0 you can use the ampersand anywhere in the selector. This is handy if you want to express your styling the other way round: If the current element is found in a container for example.

The following scss generates the exact same style as the previously shown:

.header {
    BackgroundColor: Red;
}

Button {
    BackgroundColor: Blue;
    
    /* if a button is in an header */
    .header & {
        BackgroundColor: Green;
  
        &.active {
            FontAttributes: Bold;
        }
    }
}

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4