Can I apply a stroke on all JPEG images and not include other image types like PNG, using a css stylesheet. How would I do this? Thanks.
Add a comment
|
5 Answers
You could try:
img[src$='.jpg'] {
border: 1px solid #000;
}
Comments
Give all JPEG images a class like class="jpeg" and apply the style to the class.
2 Comments
Nick Nelson
I would have to go in and manually add that to each jpeg? I have a ton of jpeg's already so that would be very time consuming.. any other ways?
tskuzzy
Just do a find and replace. Find
.jpg" and replace with .jpg" class="jpeg".If adding a class is not an option, you can also try:
img[src$=".jpg"], img[src$=".jpeg"] {
/* do whatever you need to here */
}
Comments
Short answer: There is no reliable way with CSS alone.
Long answer: You can use the [attribute$='end of value'] way (img[src$='jpg'],img[src$='jpeg'] { /* CSS properties*/ }), but it's CSS 3 and not supported correctly in most browsers.
Workarounds could vary. You can apply a class to those as tskuzzy answered. I assume you are trying to avoid this kind of "apply manually to every image" way, so, I'd say use JavaScript to do it. This selector although won't work in CSS, will do work in jQuery for example, even in IE6 (with different slowness across browsers, but usable).
Something like
jQuery:
$("img[src$='jpg'],img[src$='jpeg']").addClass("jpeg");
CSS:
img.jpeg { /* style here */ }
If you want to apply stroke on all jpg and jpeg in your page. You should to try CSS attribute selector like this.
img[src$=".jpg"], img[src$=".jpeg"] {
border:1px solid #000;
}
