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 ment.

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

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

HTML of the image:

<img alt="" border="0" src=".0/ments/mulleralc.wordpress/35/">

There is one way to identify the ment 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;}

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 ment.

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

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

HTML of the image:

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

There is one way to identify the ment 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;}

• javascript
• html
• css
• styles

Share Improve this question Follow edited Jul 23, 2013 at 22:06 Paul D. Waite 99k5757 gold badges203203 silver badges271271 bronze badges asked Jul 23, 2013 at 20:36 kathrynkathryn 12511 gold badge44 silver badges1515 bronze badges 20

• 4 Can you post the relevant HTML? The latter example should work if you have width/height attributes in your images .. – Adrift Commented Jul 23, 2013 at 20:38
• 2 If it's your page, is there a reason why you can't just apply a CSS class to each of the images you wish to hide? – Jon Newmuis Commented Jul 23, 2013 at 20:38
• 1 If you can apply attributes, you can apply class names and THEN CSS can help. – Diodeus - James MacFarlane Commented Jul 23, 2013 at 20:39
• 1 img[src*='mentbutton'] { display:none; } ... (screw IE7) – dandavis Commented Jul 23, 2013 at 20:46
• 1 Also, PLEASE give us your code. We need it to solve your problem. It is critical that we be able to reproduce your site. – ameed Commented Jul 23, 2013 at 20:51

 |  Show 15 more ments

4 Answers 4

Sorted by: Reset to default 4

the ment button URL is sequential, so even if I could hide "wordpress./mentbutton/12", the next button url is "wordpress./mentbutton/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./1.0/ments"] {display: none;}

should do it.

I'd remend 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();
    }
});

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;
}

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