Question

Given a html fragment of:

<button id="foo" onclick="window.location.href='/foo/';" 
class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only btn btn-primary" type="button" name="btn" id="btn" role="button" aria-disabled="false"><span class="ui-button-text">Join Now »</span></button>

Why are both chrome and mozilla selecting this rule:

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{...}

when I want them to select:

.btn .btn-primary .ui-widget .ui-widget-content .ui-state-default .ui-button .ui-button-text-only button,
.btn-primary {...}

Firebug shows both rules getting applied, but no matter how “more selective” I think I’m making the second selector chain, the first selector is shown at the top, and the styles from the second further down the list, all being overridden( strike-thru in firebug UI)

FWIW, I did verify that adding an id based selector does get selected first. I just dont want to have to assign ids all around. As in:

#foo,
.btn-primary {...}

Could anyone help me make the second css selector above be more specific than the first?

This all has to do with a bug I’m finding in the recently released primefaces bootstrap theme which mimics bootstrap styling. In my case, I’m also using the actual bootstrap and would like to apply styles like btn-primary to pf commandButtons etc.

This works fine UNTIL you put a commandButton inside a primefaces Panel…at which point the button styles from the pf theme are clobbering the bootstrap ones. I had thought I could just add a selector to the bootstrap css to get it to take specificity from the pf one…but aparently I’ve got more CSS selector Star Wars to play….http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

Answer 1

Solved with thanks to BoltClock who gave an important clue.

In order to get the bootstrap css classes to be selected over the pf theme ones, the selector to add to the bootstrap button-* classes was as such:

.btn-primary.ui-button

Note the lack of space between the class name and the period. This means select elements having both classes.

So where the original bootstrap css had:

.btn-primary {...}

and I simply added another selector to it to include the pf ui-button class.

.btn-primary.ui-button,
.btn-primary {...}

Now I am to successfully use the bootstrap btn-primary, btn-info, btn-success, etc as class names the in the PrimeFaces when the button is within a PrimeFaces Panel.