title: Specifying the styles for the selected tab in a navbar
body: <p>I have the following html code</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width; initial-scale=1.0" /&gt;
          &lt;link rel="stylesheet"  href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /&gt;
          &lt;script src="http://code.jquery.com/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div data-role="page" id="home"&gt;
              &lt;div data-role="header" data-theme="b"&gt;
                  &lt;h1&gt;Test&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div data-role="content" data-theme="d"&gt;
                  &lt;div data-role="navbar" data-theme="d"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="#" data-icon="custom" class="ui-btn-active"&gt;Home&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" data-icon="grid"&gt;Second page&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#" data-icon="star"&gt;Third page&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I want to achieve is to set some styles for the currently active tab in the navbar and change the icon and background for the selected tab(icon will be different for different tabs).</p>
  
  <p>Using this CSS I can target the active tab</p>
  
  <pre><code>.ui-btn-active{
      background:red !important;
  }
  </code></pre>
  
  <p>But I want to target each tabs separately because I need <strong>separate selected icons for each tab</strong>(Or lets say,for ease of illustration purpose-I need a different active tab color for each tab:<strong>red for first,blue for second,green for third</strong>)</p>
  
  <p>You can see it here - <a href="http://jsfiddle.net/8pwFK/" rel="nofollow">http://jsfiddle.net/8pwFK/</a></p>
  
  <p>Please let me know how to achieve this.Thanks in advance</p>
  
  <p>Edit:The real challenge I am facing is setting a selected state for my custom icon.This is the CSS I use for the custom icon:</p>
  
  <pre><code>.tab1 .ui-icon { background:  url(icon1.png) 50% 50% no-repeat; background-size: 30px 30px; }
  </code></pre>
  
  <p>I think I need to somehow connect <code>.ui-btn-active</code> and <code>.ui-icon</code> for this to work.But I am not able to figure out how.</p>