user2481857 user2481857 - 4 months ago 32
HTML Question

How to write a more specific css

I have following HTML (part of html that generated by primefaces for a calendar component )

<td class=" ui-datepicker-unselectable ui-state-disabled rbn-checkout-date">
<span class="ui-state-default">19</span>
</td>


I have override following css applied by primefaces

.ui-widget-content .ui-state-disabled {
opacity: 1;
filter: alpha(opacity = 100); /* For IE8 and earlier */
}


But I need to make it more specific by using the class name "rbn-checkout-date" which I have defined in the "td"

But when I add following to the css, it doesn't apply. That css doesn't even show in the firebug style pane.

.ui-widget-content.ui-state-disabled.rbn-checkout-date {
opacity: 1;
filter: alpha(opacity = 100); /* For IE8 and earlier */
}


css path of the element is as follows.

html body form#form table.rb-month-select-wrap tbody tr td div#form:calwrap span#form:cal.ui-calendar div#form:cal_inline.hasDatepicker div.ui-datepicker-inline.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all.ui-datepicker-multi-2.ui-datepicker-multi div.ui-datepicker-group.ui-datepicker-group-first table.ui-datepicker-calendar tbody tr td.ui-datepicker-unselectable.ui-state-disabled.rbn-checkout-date

Answer

Needs a space between the 'ui-widget-content' and 'ui-state-disabled' classes. Otherwise its looking for the classes on the '.ui-widget-content' element, rather than within it:

.ui-widget-content .ui-state-disabled.rbn-checkout-date {
   opacity: 1;
   filter: alpha(opacity = 100); /* For IE8 and earlier */
}
Comments