CSS selector for an img element with class

Question

I have

<a href="/">
  <img class="myClass" src="someImg.jpg" />
</a>

I tried to apply hover effect on image using:

img .myClass:hover {
  opacity: 1;
}

Why doesn't it work?

Answer 1

The selector img .myClass will select an element with a class of myClass that is a descendant of an img element. But since img elements can't contain descendant elements, that doesn't make sense.

You want to select an img element with a class of myClass, therefore you need to remove the space:

img.myClass:hover {
  opacity:1;
}

div {
  border: 1px solid;
  display: inline-block;
}
img {
  opacity: 0;
  transition: 200ms ease-in;
  vertical-align: top;
}
img.myClass:hover {
  opacity: 1;
}

<div>
  <img class="myClass" src="//placehold.it/200" />
</div>