Hide image of specific size using CSS?

Question

Thanks in advance for your help!

I have RSS, I want to publish the contents of this RSS on my page, but RSS is from WordPress and contains a button image for comments.

Problem 1: if I hide each <img> from RSS, I will also hide the images published in the article from the blog.

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

HTML images:

 <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: its 72px by 16px. So I need to hide every image on my page that is 72 (width) x 16 (height). Is there a way to do this in CSS or JavaScript?

Since we have this encoding:

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

maybe something like:

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

Answer 1

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

CSS can really help here. The attribute selector can select attributes that contain a value. So this is:

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

must do it.

Answer 2

I would recommend using multiple attribute selectors, in which case add the following code to the CSS stylesheet:

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

The only problem with this approach is that it will not work in older browsers (e.g. IE 6) because they do not recognize them.

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

 $('img').each(function () { 'use strict'; var img = $(this); if (img.width() === 72 && img.height() === 16) { img.hide(); } }); 

Answer 3

Use multiple attribute selectors.

Image tags will need to use the width and height attributes for this.

HTML

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

CSS

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

OR

As suggested above, use the CSS class.

HTML

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

CSS

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

Answer 4

CSS cannot do this. He does not know how large the images are on your page. For this you need JavaScript.