JavaFX CSS: How to inherit background color from other CSS settings?

Question

I have a CSS file to set styles in JavaFX TabPane and Tab.

Is there a way to set the TabPane's background color and inherit Tab background colors?

If I set the tab-content-area background color, can I pick this up for the tab without having specifically nominate the color again?

.tab-content-area 
{
  -fx-background-color: #d9d9d9; /* I want to apply this color to tab background */ 
}

.tab:selected 
{
  -fx-background-color : -fx-something; <?? what do i put here??>
  -fx-background-insets: 0, 1 1 0 1;
  -fx-background-radius: 5 5 0 0, 4 4 0 0;
}

Answer 1

You can set the background of the Tab transparent or inherit:

.tab-content-area {
   -fx-background-color: #d9d9d9; /* I want to apply this color to tab background */ 
}

.tab:selected {
  -fx-background-color : transparent; /* Or: -fx-background-color : inherit;*/
  -fx-background-insets: 0, 1 1 0 1;
  -fx-background-radius: 5 5 0 0, 4 4 0 0;
}

You can check the CSS structure for TabPane here.

To learn more about named colors in JavaFX please refere to this section.

Documentation of inherit can be found here.

Answer 2

I did a bit more digging and found the answer to the question Declaring Variable In JavaFX CSS File allowed me to create a solution that works good enough for what I need.

My css now looks like this:

* {
    -fx-my-global-color:#d9d9d9;
  }
.tab-content-area 
  {
  -fx-background-color: -fx-my-global-color;  
  }

.tab:selected 
 {
  -fx-background-color : -fx-my-global-color;
  -fx-background-insets: 0, 1 1 0 1;
  -fx-background-radius: 5 5 0 0, 4 4 0 0;
 }