Supported CSS Selectors

Since Codename One stylesheets are meant to be used with Codename One component hierarchies instead of XML/HTML documents, selectors work a little differently.

1. All selectors (with some specific exceptions discussed below) are interpreted as UIIDs.

2. Only 4 predefined CSS classes are supported:

3. .pressed - Targets the component when in "Pressed" state.

4. .selected - Targets the component when in "Selected" state.

5. .unselected - Targets the component when in "Unselected" state.

6. .disabled - Targets the component when in "Disabled" state.

   If no class is specified, then the selector targets "all" states of the given component.

The following are a few possible selectors you can include in your stylesheet.

1. Button - Defines styles for the "Button" UIID.

2. Button.pressed - Defines styles for the "Button" UIID’s "pressed" state.

3. Button, TextField, Form - Defines styles for the "Button", "TextField", and "Form" UIIDs.

Example 1:

The following example creates a simple button with a border, and text aligned center. By default the button will have a transparent background, but when it is pressed, it will have a gray background:

Button {
    text-align: center;
    border: 1pt solid gray;
    background-color: transparent;
}

Button.pressed {
    background-color: gray;
}

Example 2: Inheriting properties using cn1-derive

The following example defines a custom Button style named "MyButton" that inherits all of the styles of Button but changes the background color to blue.

MyButton {
   cn1-derive: Button;
   background-color: blue;
}

Special Selectors

#Device

The #Device selector allows you to define which device resolutions this CSS file should target. Mutli-images generated from this style-sheet will only be include variants for device resolutions in the range (min-resolution, max-resolution) as defined in this section. By default all resolutions are generated.

#Device {
    min-resolution: 120dpi;
    max-resolution: 480dpi;
    resolution: 480dpi;
}

#Constants

The #Constants selector allows you to specify theme constants.

Default

The Default selector is special in that it will set properties on the theme’s "default" element. The default element is a special UIID in Codename One from which all other UIIDs in the same theme are derived. This is a good place to set things like default fonts or background-colors.