Search code examples
htmlcsslistcss-selectorscss-specificity

Overriding list styles

I have a stylesheet being used for multiple CSS pages in an ASP.Net site. Two of these pages have lists that are styled almost exactly the same.

E.g

Style for all pages:

li { padding-left:40px; text-indent:-44px; }

Style for list that needs a seperate style :

.customlistitem {padding-left:90px; text-indent:0px; }

And then in the actual page the list that requires slightly different style :

<li class="customlistitem">

Problem is the customlistitem selector isn't overriding the style in the stylesheet. Why is this ?

Solution

  • Looks like you need to increase the specificity on your selector:

    li.customlistitem {
    ...
}

    .customlistitem by itself does have a higher specificity than just li, so I imagine your selectors are a bit more complex than what you've included in your question. Regardless, higher specificity is the way to go.