Help editing an image in CSS

I was comparing my code to FCC’s in a project and I have never seen this: .logo > img {

in the CSS it shows like this:

.logo > img {
  width: 100%;
  height: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 20px;
}

Can’t I just add img { ?

The corresponding HTML code is:

 <div class="logo">
      <img
        id="header-img"  src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo"/>
    </div>

.logo > img is a child selector. The properties are applied to img elements that are direct children of the element with class logo. You can read more about CSS combinators here https://www.w3schools.com/css/css_combinators.asp

1 Like

.logo > img targets img elements who are descendants of element with .logo class. Only img targets all img elements.

1 Like