Question

I have four tabs created by a piece of coding and I would like to style the fourth tab differently. Unfortunately there is no specific classes or IDs assigned individually to the list elements and no easy way of achieving this.

Is it possible to style the fourth instance of a list object using CSS alone?

This is an example of the coding that is created by the script:

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
   <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-5310-0-0">Description</a></li>
   <li class="ui-state-default ui-corner-top"><a href="#tabs-5310-0-1">Features</a></li>
   <li class="ui-state-default ui-corner-top"><a href="#tabs-5310-0-2">Specification</a></li>
   <li class="ui-state-default ui-corner-top"><a href="#tabs-5310-0-3">360° Interactive Virtual View</a></li>
</ul>

Answer 1

You can use the :nth-child pseudo class in your selector:

ul li:nth-child(4) { /* ... */ }

Browser support is good; IE < 9 is the only (admittedly not insignificant) issue.