How to overide CSS for width?

How do I override the default width of UL? For exa开发者_开发技巧mple:

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

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.

try:

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