Apply a specific style to a list item using CSS

css, html

Solution

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

Problem

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

Original source