Css Selectors Quick Reference

By Type

I.e. Button, StackPanel, Image,...

Button
{
    Foreground: Red;
}

<Button>OK</Button>

By Name

Selects controls by the x:Name attribute.

#ButtonNameInXaml
{
    Foreground: Red;
}

<Button x:Name="ButtonNameInXaml">OK</Button>

By Role ("Class")

A freely choosable name with a meaning, i.e. important, warning, success, primary, hidden,...

.warning
{
    Foreground: Red;
}

<Button cssWPF:Css.Class="warning">OK</Button>

Nesting

Taking the hierarchy of your layout in account.

Spaces mean "anywhere below" the left-hand expression, i.e. StackPanel Button means "All buttons in all StackPanels"

.message-box .footer Button
{
    Foreground: Red;
}

2.0.0 also supports an alternative syntax (see Nested Css Selectors):

.message-box {
    .footer {
        Button
        {
            Foreground: Red;
        }
    }
}

<StackPanel cssWPF:Css.Class="message-box">
    <TextBlock>Message</TextBlock>

    <StackPanel cssWPF:Css.Class="footer">
        <Button>OK</Button>
    </StackPanel>
</StackPanel>

Combine multiple Selectors

Multiple selectors can be combined by separating them with commas.
A control satisfying one or more of these selectors gets this style applied - the commas can be read as "OR".

#ButtonNameInXaml,
.warning,
.message-box .footer Button
{
    Foreground: Red;
}

<Button x:Name="ButtonNameInXaml">OK</Button>
<TextBox cssWPF:Css.Class="warning"></TextBox>
<StackPanel cssWPF:Css.Class="message-box">
    <TextBlock>Message</TextBlock>

    <StackPanel cssWPF:Css.Class="footer">
        <Button>OK</Button>
    </StackPanel>
</StackPanel>