Hide image of specific size, by CSS?

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

Problem 1: if I hide every <img> from the RSS, I also hide images posted on the article from the blog.

Problem 2: the comment button <img> URL is sequential, so even if I could hide "wordpress.com/comments/ ... 12", the next button <img> url is "wordpress.com/comments/ ... 13" and so on :(

HTML of the image:

<img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/mulleralc.wordpress.com/35/">

There is one way to identify the comment button image: it’s 72px by 16px. So, I need to hide every picture on my page that is 72 (width) x 16 (height). Is there a way to do this in CSS or JavaScript?

Since we have coding like this:

img[src~="http://...url..."] {display: none;}    

maybe there's something like:

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

Answers:

Answer

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

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();
    }
});
Answer

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.