|.class||.header||Selects all elements with the StyleClass property containing 'header'|
|#id||Selects all elements with StyleId set to email. If StyleId is not set, fallback to x:Name. When using Xaml, always prefer x:Name over StyleId.|
|*||*||Selects all elements|
|element||label||Selects all elements of type Label (but not subclasses). Case irrelevant.|
|^base||^contentpage||Selects all elements with ContentPage as base class, including ContentPage itself. Case irrelevant. This selector isn't present in the CSS specification, and only applies to XF.|
|element,element||label,button||Selects all Buttons and all Labels|
|element element||stacklayout label||Selects all Labels inside of a StackLayout|
|element>element||stacklayout>label||Selects all Labels with StackLayout as a direct parent|
|element+element||label+entry||Selects all Entries directly after a Label|
|element~element||label~entry||Selects all Entries preceded by a Label|
Unsupported Selectors (for this version)¶
Selectors can be combined without limitation, like in StackLayout > ContentView > label.email. But keep it sane !
Styles with matching selectors are all applied, on by one, in definition order. Styles defined on the item itself is always applied last.
This is the expected behavior in most cases, even if doesn't 100% match common CSS implementations.
Specificity, and specificity overrides (
!important) are not supported. This is a known issue.
Unsupported Common Properties¶
- layout properties (box, or grid). FlexLayout is coming, and it'll be CSS stylable,
- shorthand properties, like
- one of the 140 X11 color (https://en.wikipedia.org/wiki/X11_color_names), which happens to match CSS Colors, UWP predefined colors and XF Colors. Case insensitive
rgb(100%,0%,0%)=> values in range 0-255 or 0%-100%
rgba(255, 0, 0, 0.8),
rgba(100%, 0%, 0%, 0.8)=> opacity is 0.0-1.0
hsl(120, 100%, 50%)=> h is 0-360, s and l are 0%-100%
hsla(120, 100%, 50%, .8)=> opacity is 0.0-1.0
One, two, three or four values, separated by white spaces.
- a single value indicates uniform thickness
- two values indicates (resp.) vertical and horizontal thickness
- three values indicates (resp.) top, horizontal (left and right) and bottom thickness
- when using four values, they are top, right, bottom, left
IMPORTANT: This differs from Xaml thickness definitions, which are
- separated by commas (
- are in the form of
One of the following value, case insensitive. Exact meaning depends of the platform and the control
initial is a valid value for all properties. It clears the value (resets to default) that was set from another Style.
- no inheritance supported, meaning no
inheritvalue and that you can't set the font-size to a layout, and expect all the labels in that layout to inherit the value. The only exception is the
directionproperty, which supports
inherit, and that's the default value.
- element are matched by name, no support for xmlns