-
Notifications
You must be signed in to change notification settings - Fork 15
CSS Reference
This page describes CSS features, supported in the library. Refer to MDN and w3schools for exhaustive definitions and examples of every selector, property, function, or value.
Selectors follow standard specificity rules, except there is no !important rule. Simple selectors may combine into lists of complex compound selectors, as in usual CSS.
| Selector | Example | Description |
|---|---|---|
* |
.row > * |
any widget |
T |
Label |
any widget of class T or its subclass |
A#id |
#main |
the widget with this unique id |
A.class |
.alert.warning |
any widget that contains the attribute with no value |
A:state |
Button:pressed |
any widget in a certain state |
A:not(state) |
Slider:not(enabled) |
any widget with no such state |
A[attr] |
[status] |
any widget that has the attribute with or without a value |
A[attr=value] |
[status="loading"] |
any widget that has the attribute with this value |
A[attr~=word] |
...containing this word | |
A[attr|=word] |
...this first word, either alone, or followed by hyphen (-) |
|
A[attr^=substr] |
...the beginning | |
A[attr$=substr] |
...the end | |
A[attr*=substr] |
...a substring | |
A B |
#main Slider |
any widget B that is a descendant of a widget A |
A > B |
Button > .icon |
any widget B that is a child of a widget A |
A + B |
.header + .hide |
any widget B immediately preceded by a sibling widget A |
A ~ B |
.header ~ Paragraph |
any widget B preceded by a widget A |
:root |
root widget of the window | |
A:empty |
any widget that doesn't have children |
Supported length units are px, pt, em, rem, in, mm, cm, and also % (listed here).
Grid tracks also support fr units, min-content, max-content, and auto keywords.
Supported angle units are deg, rad, grad, and turn; time units - s and ms.
Supported color values are hexadecimal, rgb(), rgba(), hsl(), hsla(), and named colors (lowercase only, without underscores).
Supported gradients currently are:
linear(angle, color1, color2)
url() accepts resource ID only.
All properties accept inherit and initial values.
Properties can inherit.
Custom properties are supported with some limitations:
- no dependent declarations, e.g. no
--xyz: var(--abc) - can set whole value only, e.g. no
border: 1px solid var(--main-color) - no fallback values
Cursive properties are non-standard.
Width and height specify sizes including padding and borders, as if box-sizing: border-box was set.
| Name | Notes |
|---|---|
| width, height | preferred sizes, which means the box may still grow or shrink |
| min-{width,height} | - |
| max-{width,height} | - |
| padding-{top,right,bottom,left} | don't support percents |
| margin-{top,right,bottom,left} | same |
| border-{top,right,bottom,left}-width | same |
| padding | same |
| margin | same |
| border-width | same |
| Name | Notes |
|---|---|
| display |
free|row|column|flex|grid, other may be added at startup |
| {column,row}-gap | - |
| gap | - |
| justify-{content,items,self} | - |
| align-{content,items,self} | don't support baseline alignment |
| place-{content,items,self} | - |
| order | - |
| Name | Notes |
|---|---|
| top, right, bottom, left | - |
| Name | Notes |
|---|---|
| flex-direction | - |
| flex-wrap | - |
| flex-flow | - |
| flex-grow | - |
| flex-shrink | - |
| flex-basis | - |
| flex | - |
These properties don't support named lines and negative line indices. Shorthands don't support / syntax.
| Name | Notes |
|---|---|
| grid-template-{columns,rows} | - |
| grid-template-areas | - |
| grid-auto-flow | - |
| grid-auto-{columns,rows} | single value only |
| grid-{column,row}-{start,end} | auto|area-name|int|span int |
| grid-{column,row} | auto|area-name |
| grid-area | auto|area-name |
| Name | Notes |
|---|---|
| background-color | - |
| background-image | single image layer only |
| background-position | no offset syntax |
| background-size | - |
| background-origin | - |
| background-clip | - |
| background | - |
| border-{top,right,bottom,left}-color | - |
| border-{top,right,bottom,left}-style |
solid only |
| border-color | - |
| border-style |
solid only |
| border |
solid only |
| border-{top,bottom}-{left,right}-radius | single value only |
| border-radius | no / syntax |
| box-shadow | no inset shadows, no offset, one shadow only |
| focus-rect-color | the color of dotted rectangle around the focused widget |
| Name | Notes |
|---|---|
| font-face | - |
| font-family | - |
| font-size | no keywords |
| font-style | normal|italic |
| font-weight | - |
| Name | Notes |
|---|---|
| color | - |
| tab-size | integer only, 4 by default |
| text-align | no left and right, start and end instead |
| text-decoration-color | - |
| text-decoration-line | - |
| text-decoration-style |
solid only |
| text-decoration |
solid only |
| text-hotkey |
ignore|hidden|underline|underline-on-alt, see docs
|
| text-overflow |
clip|ellipsis|ellipsis-middle, also works in multiline text |
| text-transform | none|capitalize|uppercase|lowercase |
| white-space |
pre|pre-wrap only, controls text wrapping |
| Name | Notes |
|---|---|
| cursor | SDL and Windows support only ~10 cursor types |
| mix-blend-mode | - |
| opacity | - |
| transform | 2D only, single function only, no matrix yet |
| z-index | integer only, 0 by default |
| Name | Notes |
|---|---|
| transition-property | single value only |
| transition-duration | same |
| transition-delay | same |
| transition-timing-function | same |
| transition | same |
- width, height, min-{width,height}, max-{width,height}
- padding, padding-{top,right,bottom,left}
- margin, margin-{top,right,bottom,left}
- border-width, border-{top,right,bottom,left}-width
- gap, {column,row}-gap
- top, right, bottom, left
- background-position, background-size
- background-color
- border-{top,right,bottom,left}-color
- color, text-decoration-color, focus-rect-color
- letter-spacing, word-spacing
- line-height
- opacity