Preface

In CSS, selectors are a mode for selecting elements that need to be styled. There are four types of selectors in JavaFX CSS. The editor will explain them one by one below.

1. Type Selector (TypeSelector)

Most JavaFX control classes correspond to a CSS Type. We can use the type selector to control the appearance of the type control. The corresponding naming is: change the JavaFX class name to lowercase first letter. If there are multiple words splicing the class name, lowercase the first letter of the original uppercase letter of each word and connect multiple words with hyphens. Such as:

JavaFX Class	CSS Type class
Button	button
Label	label
CheckBox	check-box
TextField	text-field
...	...

The usage of type selector is as follows:

.label{
     -fx-text-fill:red
}

In this way, we set all the label text styles in the FXML file to which this CSS file is applied to red.

Second, the class selector (Class selector)

Some controls in Javafx do not have their own type selectors. At this time, you need to define if you can use a class selector and set the styles for the corresponding controls. The class selector can be applied to multiple controls, as long as you add StyleClass to the corresponding controls.

The usage of class selector is as follows:

.background-color{
     -fx-background-color:black;
}

This defines a background-color type selector. For any subclass of Node, there is a getStyleClass method, which can be passed through getStyleClass().add("background-color");, or through the FXML file The StyleClass tag adds the style of the background-color selector. The class selector will override the style selected by the type.

Three, ID selector

The ID selector is defined by #. Generally, an ID selector is unique to each control.

The usage of ID selector is as follows:

#ok-button{
   -fx-font-color:rgb(255,0,0,0);
   -fx-font-size:25px;
}

At this time, the Button whose ID is okbutton can change the style through this ID selector.

Four, pseudo-class selector (CSS Pseudo-class)

The syntax of pseudo-class is: selector: pseudo-class {property: value}

For example, we set the background color to change to gray when the mouse moves on the Button:

.button:hover{
   -fx-background-color:gray;
}

There are roughly the following types of pseudo-class selectors in JavaFx:

• disabled
• focused
• selected
• hover
• empty
• pressed
• show-mnemonic

to sum up

The JavaFX CSS documentation is not very complete, and there are a lot of things to explore. You still have to use more experience in the project, so that practice makes perfect.