accordion generated classes and style sheet access

accordion generated classes and style sheet access


I'm using the newest versions of jQ (1.3.2), the UI (1.7), and
accordion plug-in (1.7). For baseline testing/learning I'm working
with the barebones accordion code provided at http://jqueryui.com/demos/accordion
(theming tab selected) and the style sheet provided in the download
package (development-bundle/themes/base/ui.accordion.css).
I'm finding that the run-time generated classes don't always appear to
reconcile with the classes defined in the sample style sheet. For
example, Firebug shows that the active H3 element generates these 4
classes:
ui-accordion-header, ui-helper-reset, ui-state-active, and ui-
corner-top
and the style sheet references a descendent selector:
.ui-accordion .ui-accordion-header-active { ... }
I'm trying to style the accordion's active header which does not work
when styling ".ui-accordion .ui-accordion-header-active" but does work
if I create a ".ui-accordion .ui-state-active" selector.
Can anyone please explain how to use the -active selectors?
(I suspect the answer will also help me better understand how to
create my own definitions for custom header icon states. If not, I'll
post separately to better support archive searches.)