html - How to override some CSS class settings -

html - How to override some CSS class settings -

i'm using primefaces 5.1 , java programmer have lot of hard handle css classes. instance, want override of css properties removing round corners of div, wich renderized is:

class="snippet-code-html lang-html prettyprint-override"><div style="position: absolute; margin: 0px; top: auto; width: auto; z-index: 0; bottom: 0px; left: 0px; right: 0px; display: block; visibility: visible; height: 16px;" id="j_idt28" class="ui-layout-unit ui-widget ui-widget-content ui-corner-all ui-layout-south footer ui-layout-pane ui-layout-pane-south"> <div style="position: relative; visibility: visible; height: 15px;" class="ui-layout-unit-content ui-widget-content"> <span style="color:#000000;background-color:#ffff00;font-size:small;">this text within div!</span> </div> </div>

notice upper div uses lot of css classes, including class called footer declared in css as:

class="snippet-code-css lang-css prettyprint-override">.footer .ui-layout-unit-content { background-color: #ffff00 !important; padding: 0px !important; border-radius: 0px; }

i paint background yellow, other properties cannot overwriten. doing wrong?

in order override rule defined have increment specificity.

specificity means browser decides property values relevant element , gets applied. specificity based on matching rules composed of selectors of different sorts.

how calculated?

the specificity calculated on concatenation of count of each selectors type. not weight applied corresponding matching expression.

in case of specificity equality, latest declaration found in css applied element.

so rule written as:

.footer.ui-layout-pane .ui-layout-unit-content.ui-widget-content { background-color: #ffff00 !important; padding: 0px !important; border-radius: 0px; }

reference: mdn

html css primefaces