Vfrdtyky

I would like to have two styles for TabPanes in my application. For that reason, I written these CSS selectors:

.tab-pane > .tab-header-area > .tab-header-background (...)

.tab-pane:focused > .tab-header-area > .headers-region > .tab:selected .focus-indicator (...)

.tab-pane > .tab-content-area(...)

.tab (...)

.tab .tab-label (...)

.tab:selected (...)

.tab:hover (...)

.tab:selected .tab-label (...)

.tab:hover .tab-label (...)

.tab:hover (...)

In addition, I introduced a new .main-tab-pane class that defined my second style. For that one I have the following selectors:

.main-tab-pane > .tab-header-area (...)

.main-tab-pane > .tab-header-area > .control-buttons-tab (...)

.main-tab-pane > .tab-header-area > .tab-header-background  (...)

.main-tab-pane > .tab  (...)

.main-tab-pane > .tab > .tab-label (...)

.main-tab-pane > .tab:selected  (...)

.main-tab-pane > .tab:hover  (...)

.main-tab-pane > .tab:selected > .tab-label (...)

.main-tab-pane > .tab:hover  (...)

I have a "main" TabPane, where styleClass="main-tab-pane". Inside this TabPane I have a "normal" one.

The result, however, is not the one I expected: the first TabPane gets the style corresponding to .tab-pane > .tab-header-area > .tab-header-background and the second one the one corresponding to .main-tab-pane > .tab-header-area > .tab-header-background  (...).

However, all the tabs get the behavior of .main-tab-pane > .tab * (...)! In other words, .main-tab-pane > .tab overrides .tab.

My question is: how could I keep these two styles separate from each other, specially regarding the style of the tabs? I would prefer it if the answers involved FXML or CSS solutions, but Java code is also welcome.

The problem can be solved by the proper usage of the > (direct children) operator, and by following the css structure of the TabPane defined in modena.css (TabPane section):

// For tabs in general

.tab { -fx-background-color: red; }

.tab .tab-label { -fx-text-fill: yellow;}

.tab:hover { -fx-background-color: cyan; }



// Only for the main tab-pane

.main-tab-pane > .tab-header-area > .headers-region > .tab {

    -fx-background-color: blue;

}



.main-tab-pane > .tab-header-area > .headers-region > .tab:hover {

    -fx-background-color: green;

}



.main-tab-pane > .tab-header-area > .headers-region >  .tab > .tab-container >  .tab-label{

    -fx-text-fill: white;

}

These selectors define the generic style for every Tab and the special style for the Tabs that are direct children of TabPanes having the main-tab-pane CSS style class. This means, even if you embed an another TabPane inside the "main" one, the specified selectors will not select the embedded one, therefore the CSS styles will be not inherited.

Example

The two TabPanes are created like:

TabPane main = new TabPane();

main.getStyleClass().add("main-tab-pane");

Tab mainTab = new Tab("MainTab");

main.getTabs().add(mainTab);

mainTab.setContent(new TabPane(new Tab("SecondTab")));

And the result: untouched -> main tab hover -> inner tab hover.

Another possibility is, if you dont have to have the first style as a default for all of the TabPanes in you application is to is to create a second style-class that is attached to the inner TabPane:

// Main tab-pane

.main-tab-pane .tab { -fx-background-color: blue; }

.main-tab-pane .tab:hover { -fx-background-color: green; }

.main-tab-pane .tab .tab-label {-fx-text-fill: white; }



// Inner tab-pane

.inner-tab-pane .tab { -fx-background-color: red; }

.inner-tab-pane .tab .tab-label { -fx-text-fill: yellow; }

.inner-tab-pane .tab:hover { -fx-background-color: cyan; }

and create the TabPanes like:

TabPane main = new TabPane();

main.getStyleClass().add("main-tab-pane");

Tab mainTab = new Tab("MainTab");

main.getTabs().add(mainTab);

TabPane secondTab = new TabPane(new Tab("SecondTab"));

secondTab.getStyleClass().add("inner-tab-pane");

mainTab.setContent(secondTab);

For these two TabPanes the result is the same.

As an advice you should use Sass to make it more clear and easier.

For your question it should be like this :

.main-tab-pane .tab {

   color: red;

}

.second-tab-pane .tab {

   color: blue;

}

Then make sure that your tab element is INSIDE of a 'mainOrSecond'-tab-pane