Select all PNG images

Question

How to apply CSS style only to PNG images?

.pngImages {opacity:0.75} .pngImages:hover {opacity:1} 

I have many pages containing duplicate PNG files. How to apply this class to all of them without specifying img class="pngImage" ...

A similar thing, but only for png images:

 div {background-color:#ddd} 

Answer 1

You can use attribute selector

 img[src$=".png"] 

This selects all png images

Answer 2

Assuming you only need to follow the <img> tags, not the background images:

 img[src$='.png'] { background-color: #ddd; } 

This basically selects image tags whose src attribute value ends in .png

Answer 3

You can use the [attribute$='value'] selector to do this:

 img[src$=".png"] { opacity:0.75; } img[src$=".png"]:hover { opacity:1; } 

Answer 4

I think you should do this using attribute selector 1 , for example:

img[src$=".png"]{border:2px solid #8c0000;}

You may need to test this in Internet Explorer to make sure it is up.