Not that I’m aware of, but what you can do is create two classes, to do that.
SO you have:
.jpg {border: solid 8C0000 2px}
.gif {border: none}
Then when you post the image <img class="jpg" src="http://www.somesource.com/picture.jpg" alt="image" /> and <img class="gif" src="http://www.somesource.com/picture.gif" alt="image" />
Then delete the blanket style for img
That should do it.
I’m pretty certain it can be done using before: or after: pseudo-thingies, or using the [something goes here] selector.
Maybe
img[gif]
{border: none;
}
But I’m not sure if that’s the right syntax for it. Either way, it won’t work in IE.
Edit: It’s called an attribute selector and it may well be what you’re after.
http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors
Again, IE is a no go for these.
Technically, you can via the use of CSS attribute selectors:
img[src$=".jpg"]{border:2px solid #8c0000;}
However, this isn’t supported by IE6 (it is supported by FF, Safari and IE7 though) so miklb’s suggestion is more robust (though I’d probably suggest using a more semantic name than .jpg or .gif if possible).
Thread Starter
colep
(@colep)
Mklib, your suggestion worked perfectly, but generated two follow-up questions:
1) I also have a hover class like this:
a:hover { border:solid blue 2px; }
which changes the #8C0000 border blue when hovered. This no longer works. I also tried changing it to a:jpg:hover based on what I read about attribute selectors at the link posted above, but that didn’t help. (I only want the hover to apply to jpg’s).
Any ideas?
2) I also have right and left classes like this:
img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }
So how do I combine class=”jpg” and class=”right” when placing an image on a page? I tried various options but could not find a solution.
Thanks,
Peter
1) It should be:
a.jpg:hover{border:solid blue 2px;}
2) For multiple classes, use class=”jpg right” e.g.
<img src="whatever" class="jpg right" />
Thread Starter
colep
(@colep)
Thanks ifelse. You solved #2 for me, but the blue hover border does not work even with:
a.jpg:hover {border:solid blue 2px;}
Tried in both IE and FF.
I’ll keep trying…
Thread Starter
colep
(@colep)
OK, I got it! a.jpg:hover did not work but this did:
a:hover .jpg
Note: a:hover jpg (without the dot before jpg) did NOT work.
All is well now with my blog. You guys rule.
Thanks,
Pete
Thread Starter
colep
(@colep)
Heh, well it works fine in Firefox but in IE only the top portion of the border turns blue, and then sometimes that doesn’t even happen. Damn you MSFT.
try my last suggestion, and declare the class first, then the a:hover, though IE is odd at times.
Also be sure your links are in the correct order.
a:link, a:visited, a:hover, a:active (remember “LoVe HAte”). They *must* be in that order, ir they will cease to function properly.
ifelse’s advice about the CSS attribute selectors for JPG files was right on! I wanted to thank him here. I’d just launched a new site (www.comeacross.info) and realized my blanket CSS for the img tag was also getting applied to the smilies, which were GIFs, messing up the line spacing. This solved it!
Thanks!
