Align one tab to the right in JQuery UI

Question

I have a set of tabs, representing different sections of a form, all aligned to the left. When a user has filled in all sections, I want him to be able to review the entire form.

I'm using jQuery UI Tabs to split the sections in different parts. The user can switch between the sections as often as he wants.

I now want the following:

• The section tab headers should be aligned to the left (this is default for jQuery UI)
• The printing overview tab header should be aligned to the right and (possibly) have a different style

So the question is: how can I change the style of an individual tab in jQuery UI?

Answer 1

you should be able to set an id or class attribute on the tab you want right aligned, you can then set the css for that id or class, you may need to use !important after your custom styling so that the jqueryui stylesheet will be overridden with your settings

http://jsfiddle.net/4Xmkf/1/

here's a jsfiddle showing a simple example