Question

I have the following problem, i need the “ul[editable] li” class to be dominant over “#menu li”. I know I can use !important as follows:

#menu li {
    border:solid 1px #9f693a;
    outline:solid 1px #89552a;
    background:url(images/bg.png);
}

ul[editable] li {
    background-color: #333333 !important; 
    border-color: #0d0d0d !important;
    color:#fff !important;
}

I want to say something like this:

ul[editable] li !important {
    ....
}

Is there a way to do this?

Thanks!

Answer 1

Nope, you cannot use the !important statement in the selector. The only thing you can do is make the second selector more specific, (Or the first one less specific of course).

For example:

#menu li {
    border:solid 1px #9f693a;
    outline:solid 1px #89552a;
    background:url(images/bg.png);
}

#container ul[editable] li {
    background-color: #333333;
    border-color: #0d0d0d;
    color:#fff;
}

I guess you already knew this though. 🙂