title: javaFX css id selector with class selector not working
body: <p><strong><em>Edit(9/05/2016):</em></strong></p>
  
  <p><strong>Check the answer i have written..</strong></p>
  
  <blockquote>
    <p>Part 1</p>
  </blockquote>
  
  <p><em>I use <strong>this css for all TabPanes of the app</strong>:</em></p>
  
  <pre><code>.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 { 
    ....
   }
  </code></pre>
  
  <blockquote>
    <p>Part 2)</p>
  </blockquote>
  
  <p>But i have a <strong>TabPane</strong> with with <strong>id="SpecialTabPane"</strong> and i want it to be costumized with different css values so:</p>
  
  <pre><code> #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;
   }
  </code></pre>
  
  <blockquote>
    <p><strong>The Problem</strong></p>
  </blockquote>
  
  <p>Part 2 css changes all TabPanes.Why this is happening?<strong>It must select only the tabPane with id="SpecialTabPane" and class selector=".tab"</strong>... I am using Java 1.8_91</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>I found the answer it has to do with css and how the children inherit from parents.</p>