Change color of a conditionally rendered tab

A little bit of CSS trickery can get you there…

Add a CSS resource with this code that looks like this: 

.ui-tabs-nav .ui-state-default:nth-child(3) { background: red; }<br>


The “nth-child(n)” selector syntax allows you to specify the specific tab you want to style.  I chose the third tab.  The cool thing is that conditional rendering simply hides an existing tab, so the count will stay the same regardless of whether the tab is shown or hidden (or prior tabs show or hide). 



I’ve done a very simple styling, but you can go to town.  I know that “Blink” has been deprecated - and I don’t thing many browsers support the Skuiddittle css tag.  ( But we should totally push for that…)   Go to town. 

If you have more than one tabset in your page you will also want to add a specific class to that tabset so that this selector does not affect all the tabsets on the page. 

Cool!