How do style selectors work in Avalonia?

Question

Selectors look very similar to CSS. What selectors are available in Avalonia? What is the meaning of this selector for example:

<Style Selector="ListBoxItem:selected /template/ ContentPresenter">
  <Setter Property="Background" Value="#ffffff" />
</Style>

Answer 1

Yes, selectors are very similar to CSS. Currently (at 0.5.0 alpha) the following selectors are available. I'm explaining these selectors by example, as otherwise it gets hard to understand:

• Button: This selects a control by type, so if you write a selector Button then it will match the Avalonia.Controls.Button class. It won't match derived types [1]
• :is(Button): This is very similar to Class except it also matches derived types
• Button TextBlock: When two selectors are separated by a space, then the selector will match descendants, so in this case the selector will match any TextBlock that is a logical descendant of Button
• Button > TextBlock: When two selectors are separated by a >, then the selector will match children, so in this case the selector will match any TextBlock that is a direct logical child of Button
• Button#MyButton this will match any Button with the Name of MyButton
• Button.MyClass this will match any Button with the string MyClass as an entry in its Classes
• Button:disabled this will match any Button with the :disabled pseudo-class
• Button[IsDefault=true]: this will match any Button which has an IsDefault property of true
• Button /template/ ContentPresenter this matches a ContentPresenter in the control template of a Button [2]

[1]: Note the type of an object is actually determined by looking at its IStyleable.StyleKey property, so if you do want your control which inherits from Button to be styled as a Button, then you can implement the IStyleable.StyleKey on your class to return typeof(Button).

[2]: This is similar to the (now deprecated) /deep/ operator in CSS; CSS shadow DOM is a very similar concept to control templates.