How to style each tab separately in ionic@1.0.3-beta


Just using the “tabs” example applications ans added a class to

<ion-tabs class="tabs-icon-top tabs-calm">
<ion-tab title="Dashboard" icon="icon ion-home" href="#/tab/dash" class="my-style-tab1">
	<ion-nav-view name="tab-dash"></ion-nav-view>

<ion-tab title="Friends" icon="icon ion-heart" href="#/tab/friends" class="my-style-tab1">
	<ion-nav-view name="tab-friends"></ion-nav-view>

<ion-tab title="Account" icon="icon ion-gear-b" href="#/tab/account" class="my-style-tab1">
	<ion-nav-view name="tab-account"></ion-nav-view>

Unfortunately the class is ignored in the rendered view.
How can I add a separate style to each tab ?

Kind regards


If anyone is interested in the solution:
I found a way to style them by using nth-last-child(n)



Hey, do you mind posting a codepen with this example? It could be a good resource for anyone who wants to do this too


As requested here is the codepen:


If it’s weird for you to count backwards or if you have a dynamic count of tabs (like I do) you can use nth-of-type to start counting from the beginning an d style your tabs: { // do your styling for the first tab here } { // do your styling for your second tab here }


I made a PR for your problem, I added the class attribute to the ion-tab directive.