Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Mirissage Fernando
Mirissage Fernando
Courses Plus Student 309 Points

How to select all img tags with empty alt="" ?

img[alt*=:empty] tried but doesn't work, any help ?

4 Answers

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Mirissage,

I found a way to target images by their alt tag, but not using the empty or contains attributes.

img[alt] {
    /*style*/
}

This will select any img with an alt tag. Whether it is empty or not, though, so you would have to omit the alt="" from the img tag you didn't want to target.

OR -

img[alt=""] {
   /*style*/
}

Would successfully target an img tag with alt=""

Likewise, you can target imgs with specific alt tags by altering the CSS.

Hope that helps,

Ede

Mirissage Fernando
Mirissage Fernando
Courses Plus Student 309 Points

Awesome ! Thank-you a lot !!!! this is what I was looking for cuz this will help me to find all missing alt tags thanks again ...

edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

No problem, glad it helped.

All the best,

Ede

edeharrison
seal-mask
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points
edeharrison
.a{fill-rule:evenodd;}techdegree
edeharrison
Full Stack JavaScript Techdegree Student 11,127 Points

Hi Mirissage,

It's not possible to select img tags by whether they have an empty alt or not. What is it you're trying to achieve?

Your best bet is select them by either assigning a class or an ID.

For example:

Assigning the image a class

<img class="empty-alt" src="image.jpg" />

.empty-alt {
border: 1px solid red;
}

Assigning the image an ID

<img id="empty-alt" src="image.jpg" />

#empty-alt {
border: 1px solid red;
}

Hope this helps, Ede

Kirill Fedotov
Kirill Fedotov
3,809 Points
Kirill Fedotov
Kirill Fedotov
3,809 Points

Maybe its easier to create a specific class for these images and select — *.specclass (in jQuery)

But, if you have not to many images in the document, you can use not() method to exclude every img with defined alt like so:

$(‘img[alt]’).not(‘[alt*=definedname]’)

Mirissage Fernando
PLUS
Mirissage Fernando
Courses Plus Student 309 Points
Mirissage Fernando
Mirissage Fernando
Courses Plus Student 309 Points

Thanks & actually I was learning the pseudo classes ":empty" & "contains" attribute selectors what I want is to look for img tags with empty [alt=""] attributes

Ex: img src="images/shuttles/peugeot5008.png" alt=""

this I want to target by that empty alt tag

AND

Below will select all "alt" attributes whithin img tags

img[alt]{ border: 10px solid tomato; }

but what I wanna do is target all (alt="") empty attributes within an image,

did anyone understand ?