CODEWITHSUNDEEP
jqueryjquery-ui
Yetimwork Beyene
Yetimwork Beyene

Reputation: 2337

Understanding the jquery ui css file content

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?

Upvotes: 0

Views: 137

Answers (2)

Denny Mueller
Denny Mueller

Reputation: 3615

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.

Upvotes: 0

Artyom Neustroev
Artyom Neustroev

Reputation: 8715

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

Upvotes: 1

Related Questions