WordPress.org

Support

Support » How-To and Troubleshooting » can CSS treat jpg and gif images differently?

can CSS treat jpg and gif images differently?

  • In my CSS stylesheet I have the following:

    img {border:solid #8C0000 2px}

    which puts a border around images. Is it possible to have this apply only to jpg images and not to gifs?

    Thanks!
    Pete

Viewing 12 replies - 1 through 12 (of 12 total)
  • 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).

    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" />

    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…

    try .jpg a:hover

    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

    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!

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘can CSS treat jpg and gif images differently?’ is closed to new replies.
Skip to toolbar