Default Override img css

Question

How can I override img css for a specific image.

Let's say

I have css on my website like

img{
border:2px solid #ECECEC;
padding:4px;
}

I have one img on the website: <img id="example" src="../example.png"/>

Now I do not want to use img css for this particular image.

How can i do this?

thank

Answer 1

use idas a selector and change the necessary css properties.

#example{
  border:0;
  padding: 0;
}

Answer 2

img#example {border:none !important; }

No frame for image with id example

Answer 3

If for some reason you cannot touch the markup, you can use the attribute selector.

img[src="../example.png"] {
  border:0;
  padding:0;
}

Answer 4

add a separate class to the image Example

 <img class="example" id="example" src="../example.png"/>
.example{
    border:0 !important;
    padding: 0 !important;
 }