Question

Chrome is taking the CSS padding from .link_block ul li, even though li.page_icon appears afterwards and I’ve included an !important declaration.

I know there are tons of different ways to apply the padding I want, but if anyone could help explain why the link_block class CSS is taking precedent here even though the page_icon class seems more specific and has the !important declaration.

HTML:

 <li class="page_icon">Create New Resume</li>

CSS:

.link_block ul li {
color: #000;
text-decoration:none;
padding: 0px 0px 10px 0px;
font-family:Verdana, Geneva, sans-serif;
}

 li.page_icon {
display:block;
width: 100%;
min-height: 60px;
background-image:url(../../images/page_icon.png);
background-position:top left;
background-repeat:no-repeat;
padding: 0px 0px 0px 50px; !important
margin: 0px 0px 0px 0px;
}

Answer 1

First, !important should be before the semicolon, like this:

padding: 0px 0px 0px 50px !important;

Second, you really shouldn’t using important’s in your CSS. You could solve the problem by giving your lower rule equal specificity as the other rule, and thus the lower rule will be the one that gets applied.

ul li.page_icon {
    display:block;
    width: 100%;
    min-height: 60px;
    background-image:url(../../images/page_icon.png);
    background-position:top left;
    background-repeat:no-repeat;
    padding: 0px 0px 0px 50px; !important
    margin: 0px 0px 0px 0px;
}

Here’s a good link on specificity