Question

I have a simple list, which I managed to get in a line and have background image for all items. However I want to have some of the list items(List item 3) to have a different background image. Is there a way to do this without using !important? My code is Below.

The CSS

.my-list li {
    list-style: none;
    display: inline;
    background-image: url(../images/butn-bg.png);   
}
.different-bg {
        background-image: url(../images/butn-bg-1.png);
}

The HTML

<div class="my-list">
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li class="different-bg">List item 3</li>
    <li>List item 4</li>
  </ul>
</div>

Thanks

Answer 1

You just need to increase the specificity of your selector:

.my-list li {
    list-style: none;
    display: inline;
    background-image: url(../images/butn-bg.png);   
}
.my-list li.different-bg {
        background-image: url(../images/butn-bg-1.png);
}

See Calculating a selector’s specificity