Question

I’m adding a style class to an node if it’s selected and then remove it if I select other item. Even if I remove the style class the style wont refresh so it wont go back to normal state:

admin_category_label.getStyleClass().remove(admin_category_label.getStyleClass().indexOf("selected"));
admin_category_label.getStyleClass().add("clear");

but the style will stay the same as class selected

Answer 1

This is a bug. It is reported here Removal of hovered style class, does not update styling. You may want to vote and watch it. As a workaround you should override css rules you touched/changed to be the same as default ones. Demo:

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBoxBuilder;
import javafx.stage.Stage;

public class StyleDemo extends Application {

    @Override
    public void start(Stage primaryStage) {
        final Label lbl = new Label("Style Me");
        lbl.getStyleClass().add("style1"); // initial style

        Button btn = new Button("Change the style");
        btn.setOnAction(new EventHandler<ActionEvent>() {

            @Override
            public void handle(ActionEvent arg0) {
                lbl.getStyleClass().remove("style1");
                lbl.getStyleClass().add("style2");
            }
        });

        StackPane root = new StackPane();
        root.getChildren().add(VBoxBuilder.create().spacing(20).children(lbl, btn).build());
        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

and the style.css is:

.style1 {
    -fx-text-fill: red;
    -fx-border-color: green;
    -fx-font-size: 20;
}

.style2 {
    -fx-text-fill: blue;
    -fx-border-color: red;
    -fx-font-size: 15;
    -fx-underline: true;
}

when the button is clicked the initially added style1 is removed and the style2 is added.