CSS - How to Affect All Images EXCEPT for One Particular Image


Tags: css,image

Problem :

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.



Solution :

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%;
}

    CSS Howto..

    Why will show() only work for fields that are hidden using inline css?

    How do I remove the white spaces around my dashboard header on reactjs

    How to insert a div in between flexbox rows and keep everything responsive?

    How to make the footer stick to the bottom?

    css how to remove the empty space at the left

    css: how to access a value that is not used by an element?

    How to use -webkit-appearance: searchfield-results-decoration?

    How to “crop” a rectangular image into a square with CSS?

    How to change CSS property before element is created?

    How to make separating lines/borders in a table disappear with CSS?

    How to style the values in a textfield using CSS?

    How to access this children div

    How to ignore white spaces in between tags, CSS, PHP

    How to force a browser to show the latest changes to a CSS file?

    How to match the last n children with CSS?

    how to add a custom font to rails app

    How to move CSS classes to the right html elements

    how to easily develop print css?

    How can i use “z-index” as an css attribute selector?

    How to find last/first not empty child using only CSS?

    How to layout ASP.Net RadioButtons with Images?

    How can I get a button on the side of a text box to be perfectly aligned all the time?

    How to get CSS hover menus to stay on top

    How to wrap text to fill a DIV (like in MS-Excel) [duplicate]

    How to achieve a two column centered layout, with the main column expandable on wider screens?

    How do you programmatically apply a css class to an asp.net control?

    How to make a scroll customization for mobile application?

    How to read/get the CSS background color of a row in a gridview

    How To Display only First Word of H2 Heading With JavaScript or CSS

    How to set background image to keep its position while browser width is changing?