Selectors

OfType
XAML
C#
<Style Selector="Button">
<Style Selector="local|Button">
new Style(x => x.OfType<Button>());
new Style(x => x.OfType(typeof(Button)));
Selects a control by type. The first example above selects the Avalonia.Controls.Button class. To include a XAML namespace in the type separate the namespace and the type with a | character.
This selector does not match derived types. For that, use the Is selector.
Note the type of an object is actually determined by looking at its IStyleable.StyleKey property. By default this simply returns the type of the current instance, but if, for example, you do want your control which inherits from Button to be styled as a Button, then you can implement the IStyleable.StyleKey property on your class to return typeof(Button).
Name
XAML
C#
<Style Selector="#myButton">
<Style Selector="Button#myButton">
new Style(x => x.Name("myButton"));
new Style(x => x.OfType<Button>().Name("myButton"));
Selects a control by its Name property with a # character.
Class
XAML
C#
<Style Selector="Button.large">
<Style Selector="Button.large:focus">
new Style(x => x.OfType<Button>().Class("large"));
new Style(x => x.OfType<Button>().Class("large").Class(":focus"));
Selects a control with the specified style classes. Multiple classes should be separated with a . character, or a : character in the case of pseudoclasses. If multiple classes are specified then the control must have all of the requested classes present in order to match.
Is
XAML
C#
<Style Selector=":is(Button)">
<Style Selector=":is(local|Button)">
new Style(x => x.Is<Button>());
new Style(x => x.Is(typeof(Button)));
This is very similar to the OfType selector except it also matches derived types.
Again, the type of an object is actually determined by looking at its IStyleable.StyleKey property.
Child
XAML
C#
<Style Selector="StackPanel > Button">
new Style(x => x.OfType<StackPanel>().Child().OfType<Button>());
A child selector is defined by separating two selectors with a > character. This selector matches direct children in the logical tree, so in the example above the selector will match any Button that is a direct logical child of a StackPanel.
Descendant
XAML
C#
<Style Selector="StackPanel Button">
new Style(x => x.OfType<StackPanel>().Descendant().OfType<Button>());
When two selectors are separated by a space, then the selector will match descendants in the logical tree, so in this case the selector will match any Button that is a logical descendant of a StackPanel.
PropertyEquals
XAML
C#
<Style Selector="Button[IsDefault=true]">
new Style(x => x.OfType<Button>().PropertyEquals(Button.IsDefaultProperty, true));
Matches any control which has the specified property set to the specified value.
Note: When using a AttachedProperty in selectors inside XAML, it has to be wrapped in parenthesis.
<Style Selector="TextBlock[(Grid.Row)=0]">
Note: When using in selectors in XAML, properties must support TypeConverter​
Template
XAML
C#
<Style Selector="Button /template/ ContentPresenter">
new Style(x => x.OfType<Button>().Template().OfType<ContentPresenter>());
Matches a control in a control template. All other selectors listed here work on the logical tree. If you wish to select a control in a control template then you must use this selector. The example selects ContentPresenter controls in the templates of Buttons.
Not
XAML
C#
<Style Selector="TextBlock:not(.h1)">
new Style(x => x.OfType<TextBlock>().Not(y => y.Class("h1")));
Negates an inner selector.
Or
XAML
C#
<Style Selector="TextBlock, Button">
new Style(x => Selectors.Or(x.OfType<TextBlock>(), x.OfType<Button>()))
Finds the elements that match any of these selectors. Each selector is separated by ",".
Nth Child
XAML
C#
<Style Selector="TextBlock:nth-child(2n+3)">
new Style(x => x.OfType<TextBlock>().NthChild(2, 3));
Matches elements based on their position in a group of siblings.
Nth Last Child
XAML
C#
<Style Selector="TextBlock:nth-last-child(2n+3)">
new Style(x => x.OfType<TextBlock>().NthLastChild(2, 3));
Matches elements based on their position among a group of siblings, counting from the end.
Nth Child and Nth Last Child Syntax
:nth-child() and :nth-last-child() takes a single argument that describes a pattern for matching element indices in a list of siblings. Element indices are 1-based. Below samples use :nth-child(), but also applicable for :nth-last-child().
Keyword notation
odd Represents elements whose index in a series of siblings is odd: 1, 3, 5, etc.
even Represents elements whose index in a series of siblings is even: 2, 4, 6, etc.
Functional notation
An+B Represents elements in a list whose indices match those found in a custom pattern of numbers, defined by An+B, where:
A is an integer step size,
B is an integer offset,
n is all non-negative integers, starting from 0.
It can be understood as every Ath element starting from Bth
Functional notation examples
Example
Representation
:nth-child(odd)
The odd elements: 1, 3, 5, etc.
:nth-child(even)
The even elements: 2, 4, 6, etc.
:nth-child(2n+1)
The odd elements: 1(2×0+1), 3(2×1+1), 5(2×2+1), etc. equivalent to :nth-child(odd)
:nth-child(2n)
The even elements: 2(2×1), 4(2×2), 6(2×3), etc. equivalent to :nth-child(even). Notice that 0(2×0) a valid notation, however it's not matching any element since index starts from 1.
:nth-child(7)
The 7th element
:nth-child(n+7)
Every element start from 7th: 7(0+7), 8(1+7), 9(2+7), etc
:nth-child(3n+4)
Every 3rd element start from 4th: 4(3×0+4), 7(3×1+4), 10(3×2+4), 13(3×3+4), etc
:nth-child(-n+3)
First 3 elements: 3(-1×0+3), 2(-1×1+3), 1(-1×2+3). All subsequent indices are less than 1 so they are not matching any elements.
Online nth-child & nth-last-child Tester
Using the link below, both nth-child and nth-last-child can be easily evaluated: nth-child-tester​

Example	Representation
`:nth-child(odd)`	The odd elements: 1, 3, 5, etc.
`:nth-child(even)`	The even elements: 2, 4, 6, etc.
`:nth-child(2n+1)`	The odd elements: 1(2×0+1), 3(2×1+1), 5(2×2+1), etc. equivalent to `:nth-child(odd)`
`:nth-child(2n)`	The even elements: 2(2×1), 4(2×2), 6(2×3), etc. equivalent to `:nth-child(even)`. Notice that 0(2×0) a valid notation, however it's not matching any element since index starts from 1.
`:nth-child(7)`	The 7th element
`:nth-child(n+7)`	Every element start from 7th: 7(0+7), 8(1+7), 9(2+7), etc
`:nth-child(3n+4)`	Every 3rd element start from 4th: 4(3×0+4), 7(3×1+4), 10(3×2+4), 13(3×3+4), etc
`:nth-child(-n+3)`	First 3 elements: 3(-1×0+3), 2(-1×1+3), 1(-1×2+3). All subsequent indices are less than 1 so they are not matching any elements.

Styles

Resources

Last modified 1mo ago