Understanding the jquery ui css file content

Question

I noticed in the jquery.ui.theme.css file the following class after removing the comments...

 .ui-widget-header {
                  border: 1px solid #aaaaaa;
                  background: #cccccc;
                  color: #222222;
                 font-weight: bold;
                   }

Now I noticed this class name:

      .ui-widget-header .ui-state-default {
               border: 1px solid #d3d3d3;
               background: #e6e6e6;
               font-weight: normal;
               color: #555555;
                  }

How would .ui-widget-header .ui-state-default be implemented? Would the ui-state-default override the ui-widget-header if they both are implemented?

Artyom Neustroev · Accepted Answer · 2013-04-02 19:38:15Z

1

.ui-widget-header .ui-state-default rule targets the elements with class ui-state-default inside the elements with class ui-widget-header. If you implement these two classes on same element:

<div class="ui-widget-header ui-state-default"></div>

You will only see the effect of the rule .ui-widget-header on the div. However, in case you have markup like this:

<div class="ui-widget-header">
   <div class="ui-widget-header ui-state-default"></div>
</div>

You will see the effect of the second rule on inner div: the first one will be overridden.

answered Apr 2, 2013 at 19:38

Artyom Neustroev

8,7355 gold badges36 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Denny Mueller · Accepted Answer · 2013-04-02 19:42:05Z

0

According to jquery.com

.ui-widget-header: Class to be applied to header containers. Applies header container styles to an element and its child text, links, and icons.

.ui-state-default: Class to be applied to clickable button-like elements. Applies "clickable default" container styles to an element and its child text, links, and icons.

So

.ui-widget-header .ui-state-default {
               border: 1px solid #d3d3d3;
               background: #e6e6e6;
               font-weight: normal;
               color: #555555;
                  }

applies to an clickable button-like element with the class .ui-state-default inside an header container with the class .ui-widget-header.

answered Apr 2, 2013 at 19:42

Denny Mueller

3,6255 gold badges38 silver badges67 bronze badges

Collectives™ on Stack Overflow

Understanding the jquery ui css file content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related