Why does the class definition not affect images?

Why is this code not working for me?

img.daf{
max-width: 20px;
max-height: 20px;
}
.daf img {
max-width: 20px;
max-height: 20px;
}

This should work

I think it is because when you use img.daf as a selector (with no spaces between img and .daf), the CSS tries to match all elements that are images and also have the class daf.
https://www.w3schools.com/cssref/css_selectors.php

But in this code:

<div class="daf">
 <img src="foo.jpg">
</div>

the element with the class daf is not the image, rather the div in which it is contained.
Since the document contains no element that is both an image and has the class daf, the styling cannot be applied.

In the following example img.daf would instead work:

<img src="foo.jpg" class="daf">
3 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.