How to override max-width for specific div?

Question

I am searching for the following solution. In my CSS I have the following:

img, a img { 
    max-width: 100%;
    vertical-align: middle; 
}

This code is necessary for my WordPress theme and responsive web design. Now I want to override max-width property to auto. When I do this, it doesn't override:

#pixel-perfect img {
    max-width: auto !important;
    position: absolute;
    margin: -200px 0 0 -140px;
    z-index: -9999;
}

What did I do wrong?

Answer 1

I think it's because a img is more specific than #pixel-perfect img. Element selector is more specific than id selector (So in this example you have 2 elements vs 1element and 1 id).

In order to fix it, you'd have to add an element to your declaration, for example:

a#pixel-perfect img {
    max-width: auto !important;
}

Answer 2

Are you just looking to unset the max-width property? If so, try:

#pixel-perfect img {
    max-width: none;
}

Answer 3

Use inherit, none, or initial to reset it.

jsFiddle example - it works.

#pixel-perfect img {
    max-width: inherit;
    position: absolute;
    margin: -200px 0 0 -140px;
    z-index: -9999;
}

According to MDN, none is the default value of max-width.

Also, since you are overwriting properties, make sure the desired property precedes the initial value in which you want overwritten. Cascade stylesheets are read from top to bottom, thus, if the max-width:100% appears below max-width:inherit in the stylesheet, it will overwrite it rendering max-width:inherit ineffective.

Aside from that, specificity may be an issue. However, it isn't very likely as your initial declaration isn't very specific.

Answer 4

Ensure that your #pixel-perfect img CSS declaration is BELOW the img, a img declaration, otherwise it will get overwritten.

#pixel-perfect img {
    max-width: none;
    width: auto;
    position: absolute;
    margin: -200px 0 0 -140px;
    z-index: -9999;
}

Answer 5

max-width: auto !important;

auto in max-width is not a valid property. You should replace it with

max-width: none !important;