Selecting img over selecting class of img?

I made a css selector targeting the class “myimage” of an element and tried to add a margin to it, but it did nothing.

I found when I specifically targeted the img though, and added the same margin, it worked.

Why is this? I thought that targeting the class and the element would have the same results?

As long as you did not add styles to img and to .myimage that contradict each other – yes.
Why in your case it did not work can only be said when you post your code. Please make sure it is properly formatted.

<!-- Quotes Section -->
    <div id="quotes-section">
      <div class="content center">
        <span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span><img class="quote-citation" src="./resources/images/photography-logo.png" />
      </div>
    </div>
quote-citation {
  /* height: 1.875rem; */
  /* margin-left: 1.875rem; */
  vertical-align: bottom;
  margin-left: 1.875rem;
}

This CSS did nothing.

#quotes-section img {

  vertical-align: bottom;

  margin-left: 1.875rem;
}

This added the margin and aligned the img.

When you target a class name you have to prefix it with a dot: .quote-citation in your CSS.

Oops! of course. definitely knew that… thanks!

1 Like