Question

How do I set conditions to affect all images within my webpage (via CSS) except for one particular image which I have already set the conditions for specifically?

For example:

#rightMain img{
    width: 100%;
    height: 100%;
    border: 1px solid #000;
}

This affects any images within the #rightMain ID.

However,

img{
    height: 100%;
}

This also affects the image in the #rightMain ID in that is skews the overall resolution of the image, causing it to look unnatural.

I would like to know how to affect all images except for the one in #rightMain as I have applied specific formatting to this image and do not wish to change it; it must exist in one state, and in one state only, within the #rightMain div.

I am aware of declaring a div class/ID to affect child/parent/sibling elements, etc, but I cannot seem to be able to figure this one out.

My main aim is to keep the image within #rightMain exactly as it is declared, but to also be able to affect all images – excluding the aforementioned image – throughout the rest of the page/site.

Any help would be greatly appreciated.

Many thanks.

Answer 1

you are setting height: 100% with both selectors – I can’t see where is the difference that is causing you problems?

the only thing that comes to my mind before you clarify your question, is to have:

#rightMain img {
    width: 100%;
    height: auto; /*override height: 100%; */
    border: 1px solid #000;
}


img{
    height: 100%;
}