JavaFX CSS class for GridPane, VBox, VBox

Question

Is there a predefined CSS class for JavaFX GridPane, VBox, HBox? I can't find anything in the CSS reference, but it seems weird that default components would not have one defined.

If there isn't a pre-defined class, is there a better way than to add the class manually on all grids:

GridPane pane = new GridPane();
pane.getStyleClass().add("grid-pane");

Answer 1

No, only Control subclasses have default css classes defined. I think this is because applications that want to manage their own graphics (using a Canvas or unmanaged Shapes, for example) probably will not use css, but will likely still use these layout panes. Since css is expensive to apply to the scene graph, nodes that do not necessarily require them do not have style classes.

I don't think there is any way to add a style class to a pane, other than as you show. Obviously, if you need a lot of GridPanes with the same style class, you can just define a method to avoid the repetitive code:

private GridPane createGridPane() {
    GridPane grid = new GridPane();
    grid.getStyleClass().add("grid-pane");
    return grid ;
}

Update

Note that, as in HTML-based CSS, you can use selectors based on types as well as selectors based on style classes, as noted in the documentation. The default style class for any node is its simple class name. Thus you could select grid panes via the type selector:

GridPane {
    /* styles ... */
}

This feels a little fragile to me: in particular if you subclass GridPane, the selector would no longer apply, which is very counter-intuitive from an object-oriented perspective. I would recommend using style classes over type selectors.

Also note that if you are wanting to change the color scheme for the entire application (or just a sub-graph of the scene graph), which is probably the most common use case for this, you can simply define values for some standard looked-up colors. For example:

.root {
    -fx-base: #bfe7ff; 
    -fx-accent: #0096c9 ;
    -fx-default-button: #abd8ed ;
    -fx-focus-color: #039ed3;
    -fx-faint-focus-color: #039ed322;
    -fx-focused-text-base-color : ladder(
            -fx-selection-bar,
            -fx-light-text-color 45%,
            -fx-dark-text-color 46%,
            -fx-dark-text-color 59%,
            -fx-mid-text-color 60%
        );
    -fx-focused-mark-color : -fx-focused-text-base-color ;  

    -fx-font-family: verdana;  
}

will apply a "blue theme" to the whole application, propagating the looked-up colors and properties that default to "inherit" to all child nodes.