CODEWITHSUNDEEP
css
Subodh Nijsure
Subodh Nijsure

Reputation: 3453

what is the order of css style evaluation?

I am new to css so pardon if this is very basic. But I have element in my html page like this

<div  id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">

And in my css I have following:

.ui-widget-content {
    background: yellow !important;
    color: blue !important;
    border-radius: 0px !important;
    border: none;
}

.ui-widget-content .ui-datepicker { 
    background: blue; !important;
    border: 1px solid #555; !important;
    color: red; !important;
}

With this I expected my ui-datepicker element to have background of blue however it always turns out to be yellow. No matter where I place .ui-wdget-content. If I want to have css where all ui-widget-element to have background of yellow, except the ui-datepicker to have background of blue. What is the css incantation I have to do?

Upvotes: 0

Views: 546

Answers (3)

Ed_
Ed_

Reputation: 1097

What you are actually telling is:

<div class="ui-widget-content"> background yellow  </div>

<div class="ui-widget-content> yellow too
   <div  class="ui-datepicker" > background blue </div>
</div>

And ultimately int the priority to apply styles the inline style it's at the top

<div style="background-color: " >
</div>

Check these: http://css-tricks.com/multiple-class-id-selectors/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

You're having this

.ui-widget-content .ui-datepicker {

But according to your HTML

<div  id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">

your CSS should be

.ui-widget-content.ui-datepicker {

This would select the element for you.

Upvotes: 0

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

.ui-widget-content .ui-datepicker should be .ui-widget-content.ui-datepicker (no space)

There is no ui-datepicker class inside any ui-widget-content, instead you want to select the element with both classes.

Upvotes: 7

Related Questions