title: How change text color of Tab Selected by CSS?
body: <p>This my code create tab by Jquery:</p>
  <pre><code>&lt;script src=&quot;http://localhost:81/joomlandk/js/jquery-1.9.1.js&quot;&gt;&lt;/script&gt;
  
  &lt;link rel=&quot;stylesheet&quot; href=&quot;&lt;?php echo $this-&gt;baseurl;?&gt;/css/jquery-ui.css&quot;&gt;
  &lt;div id=&quot;dtabs&quot; class=&quot;tabContaier&quot;    &gt;
          
          &lt;ul &gt;
              &lt;li&gt;&lt;a href=&quot;#tabs-1&quot;&gt;Nunc tincidunt&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#tabs-2&quot;&gt;Proin dolor&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#tabs-3&quot;&gt;Aenean lacinia&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id=&quot;tabs-1&quot; &gt;
              &lt;ul class=&quot;nav&quot;&gt;
                  &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Test link&lt;/a&gt;&lt;/li&gt;
                  &lt;ul class=&quot;itemcon&quot;&gt;
                      &lt;li&gt;Test under&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div id=&quot;tabs-2&quot;&gt;
              tab 2
          &lt;/div&gt;
          &lt;div id=&quot;tabs-3&quot; &gt;
              tab 3
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  <p>My CSS:</p>
  <pre><code>.ui-tabs {
      position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as &quot;fixed&quot;) */
      padding: .2em;
          padding-top: 150px;
  }
  .ui-tabs .ui-tabs-nav {
      margin: 0;
      padding: .2em .2em 0;
  }
  .ui-tabs .ui-tabs-nav li {
      list-style: none;
      float: left;
      position: relative;
      top: 0;
      margin: 1px .2em 0 0;
      border-bottom-width: 0;
      padding: 0;
      white-space: nowrap;
  }
  .ui-tabs .ui-tabs-nav li a {
      float: left;
      padding: .5em 1em;
      text-decoration: none;
  }
  .ui-tabs .ui-tabs-nav li.ui-tabs-active {
      margin-bottom: -1px;
      padding-bottom: 1px;
  }
  .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
  .ui-tabs .ui-tabs-nav li.ui-state-disabled a,
  .ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
      cursor: text;
  }
  .ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
  .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
      cursor: pointer;      
  }
  .ui-tabs .ui-tabs-panel {
      display: block;
      border-width: 0;
      padding: 1em 1.4em;
      /*background: none;*/
  }
  </code></pre>
  <p>Result:</p>
  <p><img src="https://i.stack.imgur.com/Ylhl4.png" alt="enter image description here" /></p>
  <p>i try add more: but not work.</p>
  <pre><code>.ui-tabs-selected ul li a{
  color: red;
  background: #ccc222;
  }
  </code></pre>
  <p>I want to change text color of tab title when tab selected by CSS.
  Can you help me? i am very poor css.:)</p>