0

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?

Improve this question
10
  • 2
    Try changing .ui-widget-content .ui-datepicker { to .ui-widget-content.ui-datepicker {. The space means apply to a descendant.
    – j08691
    Commented Jun 25, 2014 at 20:13
  • Uh, shouldn't your code be: <div id="ui-datepicker-div" class="ui-datepicker" style="ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
    – AStopher
    Commented Jun 25, 2014 at 20:13
  • 2
    background: blue; !important; wont work. Needs background: blue !important; Extra semi-colan
    – Mathias Rechtzigel
    Commented Jun 25, 2014 at 20:14
  • 1
    @zyboxinternational those aren't "styles", they are "classes".
    – showdev
    Commented Jun 25, 2014 at 20:14
  • 1
    @zyboxinternational Nope. HTML will ignore classes that don't exist.
    – I wrestled a bear once.
    Commented Jun 25, 2014 at 20:17

3 Answers 3

Reset to default
7

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

Improve this answer
2
  • Indeed removing the spaces between .ui-widget-content and .ui-datepicker fixes my issue. Also there was ';' after blue that i had to remove. But now leaves me confused I see many style sheets where they have things say like: .ui-menu .ui-menu-item { background: transparent; } so how does the space between class specification interpreted by css? Is is it like class that has ui-menu AND class that has ui-menu-item apply the background style?
    – Subodh Nijsure
    Commented Jun 25, 2014 at 20:31
  • 1
    .a .b selects anything with class b which is inside anything with class a. .a.b selects anything with class a and b.
    – Rich Bradshaw
    Commented Jun 25, 2014 at 20:43
1

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

Improve this answer
1
  • Thank you for that multiple-class-id-selector link helped me a lot!
    – Subodh Nijsure
    Commented Jun 25, 2014 at 21:06
0

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.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.