Question

Story short I have widgets sidebar. I style it like this:

.widgets ul {padding: 10px}

Now one of the ULs inside widgets I want to avoid padding from it, but keeping all other ULs use default padding of 10px.

So i tried to give class to children UL which I want no padding on like this

.tabs {padding:0}

I tried ul.tabs, and .widgets ul.tabs nothing seems to take effect. It still receives padding 10px. And I can’t afford to do custom padding for every UL inside the widgets.

Can you please tell me what I am missing ?

The html is pretty basic.

<ul class="widgets">

     <li><h2>Widget title 1</h2>
          <ul>
          ....my widget content
          </ul>
     </li>

     <li><h2>Custom widget 1</h2>
          <ul class="tabs">
          ...this one I want to have padding:0..
          </ul>
     </li>

</ul>

Thats the html basic framework. I set padding:10px to any ul in PARENT widgets ul but I want specific custom widget to have its own custom styles, I can’t do it 🙁 in this case ul class=tabs

Answer 1

The “C” in CSS stands for “cascading”. Learn about the cascade and you will see that your second rule is less specific than the first, so the first wins.
In general, the rule with more class selectors wins, and #ids trump most stuff.

To answer your question, adding specificity will do it.

.widgets ul.tabs {padding:0}

(assuming the .tabs is indeed on the ul like you said.)