CODEWITHSUNDEEP
htmlcss
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

How to overide CSS for width?

How do I override the default width of UL? For example: 

.tabPage .tabs ul {
    margin: 0;
    padding: 0;
    width:149px !important; 
    margin-top: 10px;
    list-style: none;
}

So html would look like this:

<div class="tabPage">
      <div class="tabs">
         <ul> <li> ... </li> <ul>
      </div>
</div>

Now I want to change the width size to 50px for UL for different webpage.

I have tried like this:

  .TabWidthSmall { width:149px; }

I have put this selector in the <ul> and it did not work.

Upvotes: 0

Views: 146

Answers (2)

Russell Dias
Russell Dias

Reputation: 73292

Why do you need the !important ? The rules in CSS cascade down, using !important halts this process. If you set a width on your parent ul and set another width on any subsequent children ul - assuming the css selectors are correct - this will get picked up and will be applied to your element.

Alternatively, as @Javad_Amiry mentioned you can also use !important on your children ul to override the previous !important, but I would try and stay clear of using so many !important's as it is a sign of bad design.

Upvotes: 3

amiry jd
amiry jd

Reputation: 27585

try:

.tabPage .tabs ul.TabWidthSmall {
    width:50px  !important; /* put new width here */
}

Upvotes: 2

Related Questions