Can I override a #id ul li behaviour with a class definition

Question

I have an area that is identified by a #id and there is a CSS like:

#id ul li {
    margin:0;
}

can I, for a specific UL in that area, override the margin-setting? I understand that #id creates very high priority in evaluating the formatting.

I have tried:

.myclass ul li {
    margin-left: 20px;
}

and

#id ul.myclass {

as well as

#id li.myclass {

Is it even possible?

Answer 1

I agree with SWilk, avoid !important if possible (and it is possible here). Some other solutions that SWilk did not offer is:

#id ul.myclass li {

or...

#id ul li.myclass {

The key is increasing the specificity of the selector, which the above, and SWilk's solutions do. The reason your original solutions did not work is that you did not include the other tag (ul or li) nor the #id with your addition of the .myclass.

Added after your comment that showed structure:

If your html is this (as you stated in your comment):

<div id="ja-col2">
  <div>.... 
    <ul class="latestnews">
      <li class="latestnews">

And your current css is (as stated in another comment):

#ja-col1 ul li, 
  #ja-col2 ul li { 
    margin:0; padding-left:15px; 
  } 
#ja-col2 .latestnews ul li, /*does not exist*/
  .latestnews #ja-col2 ul li, /*does not exist*/
  .latestnews ul li, /*does not exist*/
  ul.latestnews li.latestnews { 
     list-style:disc outside url("../images/bullet.gif"); 
     margin-left:15px; padding-left:15px; 
  } 
ul li { line-height:180%; margin-left:30px; }

The reason you are not seeing any change is because three of your selector paths do not exist in your html structure, and the one that wins by specificity is the very first group. You need:

#ja-col2 ul.latestnews li

To override the #ja-col2 ul li.

Answer 2

.myclass ul li {
    margin-left: 20px !important;
}

Should do the trick :)

Answer 3

Use pseudo fake :not ID

.myclass:not(#f) ul li {
    margin-left: 20px;
}

#hello .hello-in{
  color:red;
}

.hello-in:not(#f){
  color:blue;
}

<div id="hello">
  <div class="hello-in">
   Hello I am red
  </div>
</div>

you can even use :not(#♥) or any html4/5 ( depends on page type ) character

Answer 4

Avoid using !important. This is hard to debug and is very probable, that it will interfere with other selectors. Especially if you will try to change css in few months from now, when you will forget there was an !important clause in some place.

You need to put more specific selector than the previous one. Just use the class and id parts in one selector.

Try using either

#id .myclass ul li {
    margin-left: 20px;
}

or

.myclass #id  ul li {
    margin-left: 20px;
}

depending on where the element with "myclass" class is located in the DOM tree - if it is the parent of the #id element use first example, otherwise the second. If you want to be independent of the #id element, try to use:

#id .myclass ul li,
.myclass #id ul li,
.myclass ul li {
    margin-left: 20px;
}

This will work for all li's inside ul inside .myclass element, and it will not matter whether there is any #id element in the tree.

Best regards, SWilk