So I have a widgets sidebar and I've styled it with padding of 10px like this:
.widgets ul {padding: 10px}
However, there is one specific UL inside the widgets that I want to exclude from this padding rule while keeping all other ULs with the default padding of 10px.
I attempted to apply a class to the children UL that I want no padding on, like this
.tabs {padding:0}
I tried using ul.tabs, and .widgets ul.tabs but nothing seems to work. The UL still receives the 10px padding. I can't go ahead and manually set custom padding for every UL inside the widgets either.
Could you please point out what I might be missing ?
The HTML structure is quite simple.
<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 particular one I need to have padding:0..
</ul>
</li>
</ul>
This is the basic framework of the HTML. I have set padding:10px for any ul within the PARENT widgets ul, but I require a specific widget to have its unique styling. However, I seem to be unable to achieve this in the case of ul class=tabs