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..

    JSF - How can I format my global messages in in a visually appealing way?

    How to use Css to make CellList flow Horizontally rather than Vertically? (GWT & CSS)

    Jquery - How to set mouseleave event to an after() generating div?

    How to prevent CSS inheritance where child selectors fail?

    Font not showing properly in HTML page

    How to break a line after some certain width in css

    How to Prevent Linke break for Divs in CSS?

    how to create a tirangle and square with ccs only?

    2nd image appears as mirror image in IE— CSS image FLIP transform- How to fix?

    How to make a border which wraps around text

    How to use jQuery's flag to swap CSS display property

    How to organize CSS Sheets [closed]

    How to change the hover pseudo class of an element using jquery

    Animate Chartist on show

    How can a html table highlight columns by changing the border on hover?

    How to reverse direction of moving div once it reaches side of screen?

    How to center css menu and get rid of left margin space in ie?

    How to rotate an element around a line other than X=0,Y=0 and Z=0 using CSS3?

    jquery how to regex css style positive to negative, negative to positive?

    How to remove this extra part at the right?

    How to extend the length of a page through CSS?

    Element has greater px width than device viewport but still shows completely (mobile web app)

    CSS: How the backgrounds can extend the border and overlap?

    How to apply css to div which has no class?

    How to make this css readable?

    How can i make an arrow triangle using CSS without any cut in the side i.e. smooth sides?

    How to edit a css file in ASP.NET using C# to change the website design

    CSS: Hover in one DIV, how to display information from another DIV?

    How to style html element directly (inline)?

    How to convert columns to rows using CSS