Styles not working as expected

[asasass]

That would be nesting then.

[TechnoBear]

@asasass

This worked, but why?

Those styles are targeting anything with a class of .play which is a descendant of (inside) an element with a class of .button.

Your svg has the “play” class, and is inside a div with the “button” class, so those styles will be applied to the svg.

In addition, those styles also target any element with a class of .pause, so they will be applied to the svg with that class.

[asasass]

Is it better to use:

.button .play, .pause{
    width: 39px;
    height: 40px;
    margin: 2px 284px;
  }

or

.play, .pause{
    width: 39px;
    height: 40px;
    margin: 2px 284px;
  }

[TechnoBear]

It would depend on the exact situation, but for your code, I would use the second one, which is slightly simpler.

You would only need to use .button .play if you had more than one element with the “play” class on your page, and wanted to target only the one which was a descendant of “button”.

[asasass]

Thank you.