CSS hide all images with matching SRC attribute

css css-selectors wildcard
Devil's Advocate picture Devil's Advocate · Jul 20, 2011 · Viewed 60.9k times · Source

Is it possible to create a CSS rule that would apply a style to any IMG tag with a SRC that contained a specific string, say "hideme"? For instance, if I had the following 3 images on a page it would hide the second one?

<img src="images/test1.png">
<img src="images/hideme.gif">
<img src="images/test3.jpg">

Answer

BoltClock picture BoltClock · Jul 20, 2011

Use this CSS3 attribute selector:

img[src*="hideme"] {
    display: none;
}

I'd prefer to use a hideme class instead, but if you must hide an image based on its src attribute, the above is fine.

Related questions

wildcard * in CSS for classes

I have these divs that I'm styling with .tocolor, but I also need the unique identifier 1,2,3,4 etc. so I'm adding that it as another class tocolor-1. <div class="tocolor tocolor-1"> tocolor 1 </div> <div class="tocolor …

Read More
Is it possible to use a CSS wildcard in the middle of an attribute selector?

I have some generated CSS and would like to use some css that could select e.g. <p id="loremIndexIpsum">Text in here</p> Using on lorem and Ipsum disregarding Index. Something similar to: p#lorem*…

Read More
Is there a CSS parent selector?

How do I select the <li> element that is a direct parent of the anchor element? As an example, my CSS would be something like this: li < a.active { property: value; } Obviously there are ways of doing …

Read More