Override one css class with another?
- by user246114
Hi,
I have a list, with an li style defined. I want to replace the style of an individual element, but it doesn't seem to have any visual effect. Example:
.myList li {
background-color: yellow;
}
.foo {
background-color: green;
}
<ul class='myList'>
<li>Hello</li>
</ul>
When I add an item to the list, it has the .myList li style applied properly. I try now to remove all styles and apply the foo style to a single item (using jquery):
$(item).removeClass();
$(item).addClass("foo");
the item does not change color to green though, but this reports the class is set to 'foo':
alert($(item).attr('class'));
so I guess I'm not understanding css rules here, looks like the li class definition is just overriding whatever else I do, however I want the reverse to be true, I want to override the li style definition with foo. How do we do this?
Thanks
