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.<

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 #).

Answer 2

You can also use CSS3 attribute selectors:

img[src$='.png'] {
    height: 200px;
}

Browser support

Chrome    Firefox               IE     Opera     Safari
All       1.0 (1.7 or earlier)  7      9         3

Answer 3

To select all of them, you need to use .filter():

var images = $('img').filter(function() {
    return /\.(png|jpg|gif)$/.test(this.src);
}).height(200);