Double colored border in Sencha Touch Tabbar

Question

I have to questions:

I have a Tabbar (docked at bottom) with three items, and i want to have a "separator" between that elements. I tried to emulate the separator using border-right CSS property.

Firts question is: Is there a way to add an specific class (into the sencha class hierarchy) to the last item of my bar and for this element turn off the border-right property?

Also, i want the border composed by two lines, one dark gray color and the other a little light than the first one. The second: How i can setup this using CSS? I know how to do that with a complete border but no in that case.

Any help is very appreciated!

Answer 1

First, you can use the :last-child selector to set the border-right to none for the last tab. Second you can use box-shadow to add the second vertical line (the first is the border-right):

HTML:

<ul>
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>    

CSS:

ul {
  list-style:none;
  padding:0;
}
ul > li {
  width:33%;
  height:100px;
  float:left;    
  border-right: 1px solid darkgray;
  box-shadow:  1px 0 0 white, 2px 0 0 lightgray;
  text-align:center;
}
ul > li:last-child {
  border-right:none;  
  box-shadow:none;
}

Demo.