Seems pseudoclass selector is not working.

Describe the bug The style with selector :focus and :focus-within is not working properly.

To Reproduce Here is my test xaml code:

<Style Selector="Grid">
    <Setter Property="Opacity" Value="0.1"></Setter>
</Style>
<Style Selector="Grid:focus">
    <Setter Property="Opacity" Value="0.5"></Setter>
</Style>
<Style Selector="Grid:focus-within">
    <Setter Property="Opacity" Value="1"></Setter>
</Style>

The opacity won’t change once the control gets neither :focus nor :focus-within. I acknowledged the style below would override the style above and tried to change the order, but it still not works.

Expected behavior The opacity would change.

Desktop (please complete the following information):

• OS: Windows 11
• Version 22H2

Additional context I’ve already checked https://github.com/AvaloniaUI/Avalonia/pull/2662#issuecomment-515764732 https://github.com/AvaloniaUI/Avalonia/issues/5406 https://docs.avaloniaui.net/docs/styling/troubleshooting#selector-with-a-pseudoclass-doesnt-override-the-default . I found grid does not have a template in fluent, so those solutions above are not applying to this situation.

[stevemonaco]

@sht2017 It’s a bit janky with Opacity, but you can combine a not selector here and that might be sufficient for you. Docs for selectors

<Style Selector="Grid:not(:focus-within)">

[sht2017]

Grid is not focusable by default. Set Focusable="True" and then the pseudoclass focus will be able to be set to an empty Grid. IIRC, you also need to assign a Background so that Grid handles input events, even if it’s Transparent. You may need to define the focus selector after the focus-within. Be sure to use the Avalonia debug tools (F12) to troubleshoot.

The following works for me:

<Window.Styles>
        <Style Selector="Grid">
            <Setter Property="Opacity" Value="0.6" />
        </Style>
        <Style Selector="Grid:focus-within">
            <Setter Property="Opacity" Value="1" />
        </Style>
        <Style Selector="Grid:focus">
            <Setter Property="Opacity" Value="0.8" />
        </Style>
    </Window.Styles>

    <Grid RowDefinitions="*,*,*">
        <Grid Grid.Row="0">
            <TextBox Text="Testing Top" />
        </Grid>
        <Grid Grid.Row="1">
            <TextBox Text="Testing Middle" />
        </Grid>
        <Grid Grid.Row="2" Background="Blue" Focusable="True">
            <TextBox Width="100" HorizontalAlignment="Center" Text="Testing Bottom" />
        </Grid>
    </Grid>

Thanks for your help. I tried it and found out what was wrong with my code. Actually, Grid without Background is okay. Here was my source code before:

<Grid Name="CapsuleContainer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Opacity="0.1" Focusable="True">
        <Grid.Styles>
            <Style Selector="Grid#CapsuleContainer">
                <Setter Property="Opacity" Value="0.1"></Setter>
            </Style>
            <Style Selector="Grid#CapsuleContainer:focus">
                <Setter Property="Opacity" Value="1"></Setter>
            </Style>
            <Style Selector="Grid#CapsuleContainer:focus-within">
                <Setter Property="Opacity" Value="1"></Setter>
            </Style>
        </Grid.Styles>
        ...
</Grid>

The issue was if you set a property in control, it would override the style. Then I removed the property Opacity in Grid, and it works fine.