javaFX css id selector with class selector not working

Question

Edit(9/05/2016):

Check the answer i have written..

Part 1

I use this css for all TabPanes of the app:

.tab-pane .tab-header-area .tab-header-background {
   -fx-opacity: 0.0;    
 }


.tab-pane{
  -fx-tab-min-width:90.0px;
}


.tab-pane .tab{
 -fx-background-color: orange;
 -fx-background-radius:0.0 20.0 0.0 20.0;
 -fx-focus-color: transparent;
 -fx-faint-focus-color: transparent;   
}

.tab-pane .tab:selected{
  .....
}

 .tab .tab-label { 
     .....
 }

 .tab:selected .tab-label { 
  ....
 }

Part 2)

But i have a TabPane with with id="SpecialTabPane" and i want it to be costumized with different css values so:

 #SpecialTabPane.tab{
   -fx-background-color:cyan;
   -fx-background-radius:20 20 0 0;
   -fx-padding:3em 0em 3em 0em; 
   -fx-cursor:hand; 
 }

 #SpecialTabPane.tab:selected{
   -fx-background-color:magenta;
 }

The Problem

Part 2 css changes all TabPanes.Why this is happening?It must select only the tabPane with id="SpecialTabPane" and class selector=".tab"... I am using Java 1.8_91

Edit:

I found the answer it has to do with css and how the children inherit from parents.

Answer 1

First of all, you need to understand the structure of the components you are trying to style. If you haven't already, download Scenic View and use that to inspect the components so that you understand how the different parts of a TabPane are organized and which styles apply to the different parts.

Then you need to work on the selectors so that you find the specific classes you want to alter. You are looking for a .tab that is a descendent of a component with the id SpecialTabPane. You can either do that with descendent selectors, which says "a tab anywhere below a component called SpecialTabPane", or with child selectors which look for particular children.

The descendent selector would be:

#SpecialTabPane .tab {

Note the space between the id and the .tab, otherwise you are just adding the tab class to the SpecialTabPane itself.

A child selector would be, for example:

#SpecialTabPane > .tab-header-area > * > .tab {

Using child selectors usually gives better performance, and is more accurate because it targets specific combinations of components, which avoids unwanted results. With the descendent version, you are saying that a component with class .tab that appears anywhere underneath SpecialTabPane must use that style, which is probably not what you want.

Answer 2

I think it might be useful for others so i am posting the answer.

What i wanted to achieve is this:

The problem was that i had a TabPane which had as a children another TabPane so the child inherits the css values from parent.

I had modified the css (but before using this you had to add this Java code):

parentTabPane.setId("SpecialTabPane");
parentTabPaneTab.setId("STab");

CSS Code:

#SpecialTabPane #STab.tab .tab-label{
  -fx-text-fill:white;
  -fx-rotate:90.0; 
}

#SpecialTabPane #STab.tab:selected .tab-label{
    -fx-text-fill:white;
}

#SpecialTabPane #STab.tab{
  -fx-background-color:black;
  -fx-background-radius:20.0 20.0 0.0 0.0;
  -fx-padding:3.0em 0.0em 3.0em 0.0em; 
  -fx-cursor:hand;  
  -fx-effect: innershadow(two-pass-box, white, 15.0, 0.0, 0.0, 0.0);
}

Explaining some of css:

Let's say this piece of code:

#SpecialTabPane #STab.tab

[For every item with id selector #SpecialTabPane that has a subitem with id #Stab and class selector .tab do this..... ]

That's the key if you remove #STab it selects all the tabs from parent TabPane and Children TabPanes