JavaFX: Styling application with CSS Selectors

Question

I have a couple of questions about styling a JavaFX application with CSS Selectors (such as: .table-view for every TableView).

I have created a main CSS-file, in which I want to define the universal style properties for my application. For example: every TableView gets the same color in every screen. I just import the Main.css in every .css that is associated with a .fxml file.

Now I would like to style every HBox in a 'sidebar' the same way. I have tried it like this (as suggested in Oracle's documentation):

.sidebar > .hbox {
    /* Just some styling */
}

This is not working to my surprise, but the following pieces of code are working:

.sidebar > HBox {
    /* Just some styling */
}

.sidebar HBox {
    /* Just some styling */
}

Maybe it has something to do with the fact that .sidebar is a custom style, but I am not sure about this.

So my questions are:

1. Why isn't the first one working?

2. What should be the way to do this? (with .hbox or HBox and > or nothing?)

Answer 1

As you can see in the CSS documentation the HBOX class has no style class defined. Therefore you can't simply use .hbox http://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#hbox

If you want to lookup only direct children of the toolbar the > sign can be used. Using the > sign in a CSS selector will have some benefit in performance issues because by doing so not the complete child hierarchy under the Toolbar Control need to be scanned. Matching Nodes will only be searched in the first hierarchy of children.

So if you want to select all buttons that are direct children of a sidebar you can do the following:

. sidebar > .button

But if you really want to style all button in a sidebar (even if they are wrapped in panes, etc.) you need to use the following selector:

.sidebar .button

Back to your HBOX question: Even if the HBOX has no defined style class (.hbox) it has a type that can be used for a type selector. As described in the CSS doc all nodes have a type:

Node's getTypeSelector method returns a String which is analogous to a CSS Type Selector. By default, this method returns the simple name of the class. Note that the simple name of an inner class or of an anonymous class may not be usable as a type selector. In such a case, this method should be overridden to return a meaningful value.

Because of that the HBOX selector is working.