CODEWITHSUNDEEP
cssjquery-ui
Roger Ramos
Roger Ramos

Reputation: 578

CSS Styles applying more than once

Anyone knows why this is happaning?

It's happen in some jQuery-UI components. Not the only one.

Searched entire project for duplicated declarations... nothing.

Style inspector

css styles applying more than once

Link declaration

enter image description here

HTML

<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
    <li class="ui-state-default ui-corner-top" role="tab" tabindex="-1" aria-controls="tab-parceiras-habilitadas" aria-labelledby="ui-id-1" aria-selected="false" aria-expanded="true">
        <a href="#tab-parceiras-habilitadas" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-1" data-controls-total="22">Habilitadas na plataforma (22)</a>
    </li>
    <li class="ui-state-default ui-corner-top ui-tabs-active ui-state-active" role="tab" tabindex="0" aria-controls="tab-parceiras-disponiveis" aria-labelledby="ui-id-2" aria-selected="true" aria-expanded="false">
        <a href="#tab-parceiras-disponiveis" class="ui-tabs-anchor" role="presentation" tabindex="-1" id="ui-id-2" data-controls-total="2505">Disponíveis no sistema (2505)</a>
    </li>
</ul>

Upvotes: 1

Views: 81

Answers (1)

Hidden Hobbes
Hidden Hobbes

Reputation: 14183

This is valid behaviour as the CSS is matching two rules .ui-state-default and .ui-widget-header .ui-state-default.

If you inspect the below code you will notice that when .div2 is inside .div1 the rules will come up twice. On its own the rules come up once.

.div1 .div2, .div2 {
  background-color: red;
}
<div class="div1">
  <div class="div2">Will match two rules</div>
</div>
<div class="div2">Will match one rule</div>

Edit As pointed out by @MaksymStepanenko in the comments, some browsers will filter out duplicates (e.g. IE and Firefox). This behaviour seems to be common among webkit browsers (Chrome, Safari and Opera) and is also how Firebug chooses to display duplicate rules.

Upvotes: 2

Related Questions