Question

in my site I created this html/css

li
{
    float: left;
    ...
}

.myclass
{
    float: right;
    ...
}

<ul>
    <li>test 1</li>
    <li class="myclass">test 2</li>
</ul>

The two list elements have the same style but the second doesn’t use the class to override the left float. Why?

EDIT:
it seems that if I use

li.myclass
{
    float: right;
    ...
}

it works but I’m using myclass also in divs because it’s a common style class. How can I fix the problem without use li.?

Answer 1

As your post says, you’re able to overwrite the float-property if you use a more “specific” selector, such as li.myclass. So you could list the two selectors in a comma-seperated list.

.myclass, li.myclass {
    float: right;
}

Or you can use !important to overwrite the property.

.myclass {
    float: right !important;
}

Also, it plays a role at which position in your CSS the property shows up. Properties that are located lower in the file can overwrite properties which are above.