Hide image of specific size, by CSS?

Question

Thanks in advance for your help!

I have an RSS, I want to post the content of this RSS on my page, but the RSS is from WordPress and it contains an image of a button

Answer 1

the comment button URL is sequential, so even if I could hide "wordpress.com/commentbutton/12", the next button url is "wordpress.com/commentbutton/13" and so on :(

CSS can actually help out here. The attribute selector can select attributes which contain a value. So, this:

img[src*="feeds.wordpress.com/1.0/comments"] {display: none;}

should do it.

Answer 2

Use multiple attribute selectors.

Your image tags will have to use the width and height attributes for this to work.

HTML

<img src="your-image.jpg" width="72" height="16" />

CSS

img[width="72"][height="16"] {
     display: none;
}

OR

As suggested above, use a CSS class.

HTML

<img class="hide-from-rss" src="your-image.jpg" width="72" height="16" />

CSS

.hide-from-rss {
     display: none;
}

Answer 3

CSS cannot do this. It has no idea how large images are on your page. You need JavaScript to solve this.

Answer 4

I'd recommend using multiple attribute selectors, in this case add the following code to your CSS stylesheet:

img[width="72"][height="16"] {
    display: none;
}

The only problem with this approach is that it wouldn't work in older browsers (e.g. IE 6) because they don't recognize them.

If you are using the JavaScript library jQuery, you could use the following script:

$('img').each(function () {
    'use strict';
    var img = $(this);

    if (img.width() === 72 && img.height() === 16) {
        img.hide();
    }
});