CODEWITHSUNDEEP
css
Vince P
Vince P

Reputation: 1791

Style 4th instance using CSS

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>

Upvotes: 1

Views: 84

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201678

ul li:first-child + li + li + li

This probably has the best browser coverage you can get in this situation.

Upvotes: 2

Barry Kaye
Barry Kaye

Reputation: 7759

If you would prefer the last item as opposed specifically to the fourth you could alternatively use nth-last-child or last-child:

ul li:nth-last-child(1) { ... };

or

ul li:last-child { ... };

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

on newer browser you could do

ul li:nth-child(4);

on older browser (IE7/8) you could set a style for

ul li + li + li + li { /* assign a style */ }

and then revert it on next list-item

ul li + li + li + li + li { /* revert the previous style */ }

Upvotes: 0

Jon
Jon

Reputation: 437474

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.

Upvotes: 5

Related Questions