How to override some CSS class settings


Tags: html,css,primefaces

Problem :

I'm using primefaces 5.1 and as a Java programmer I have a lot of difficult to handle CSS classes. For instance, I want to override some of CSS properties removing the round corners of a DIV, wich renderized is:

<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 is a text inside a div!</span>
    </div>
</div>

Notice that the upper DIV uses a lot of CSS classes, including my class called footer which is declared in my CSS as:

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

I could paint the background as yellow, but other properties cannot be overwriten. What am I doing wrong?



Solution :

After emmanuel's help, the solution was simple: there is another class setting CSS atrributes for rounded DIV, so I overrided it:

.footer.ui-layout-pane .ui-layout-unit-content.ui-widget-content {
    background-color: #FFFF00;
    padding: 0px;
}

.footer.ui-corner-all {
    border-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.footer.ui-widget-content {
    background-color: #FFFF00;
    padding: 0px;
}

    CSS Howto..

    How to make a scrolling row of Divs using CSS & Javascript?

    how to manage layers in position:absolute css block

    How to style a selected radio button AND include space as clickable?

    How do I center a Bootstrap div with a 'spanX' class?

    How to horizontally align to “block” divs inside a div?

    How to highlight 3 line toggle button when i hover?

    How do I make this list not break lines when browser size is changed?

    How to tilt inner element forward when tilting outer back with css 3d transforms

    How to Extract one images from bunch of image(Image Pack)?

    How can I make this menu using only anchor tag and css Not using ul and li?

    How to get inline style that was overridden by CSS !important using JavaScript

    CSS - How do I get my list element to fill 100% of the block

    Blogger Template: how to change the color of the border css

    How to add JS and CSS file in web page based on parameter?

    Can't Figure Out How to Fix CSS Width

    How can I do html multi elements list with type attribute?

    How to set vertical alignmetn of text in bootstrap select control?

    How does one style element within a label say?

    how to make nav brand centrally aligned

    How to change css styles on alloy-ui form validator?

    how to add class with animation?

    how to use php variable in css

    How to use numbers from a js file in the css sheet?

    How to make to div comes the one under the other

    How can I get my coloured Bootstrap popover to render properly?

    How to change CSS color values in real-time off a javascript slider?

    How to set a:visited and a:hover programmatically in ASP.NET

    How to replicate the CSS design of a website

    How to create cascading menus in rails?

    How to fade text out vertically, similar to Amazon's product descriptions