Specific image extension selector in CSS or JQuery

Question

I have several images in my project with several extensions (jpg, png, gif).

Is there any way to select these images according to their extensions in css or JQuery.

<img src="img/img.jpg"/>
<img src="img/img1.png"/>
<img src="img/img2.gif"/>

for example I want images that has .png extension to have height: 200px; attribute.

Answer 1

You can use the attribute ends with selector, $=:

$('img[src$=".png"]').height(200);

The ends with selector will inaccurately miss <img src="test.png?id=1">.

You could also use the attribute contains selector, *=:

$('img[src*=".png"]').height(200);

The contains selector will inaccurately select <img src="test.png.gif" />.

If file path is all you have to go by, you'll unavoidably have to accept one of these exceptions (unless you want to implement some more advanced filter that strips values after ? or #).