Differences between selectors

[asasass]

What’s the difference between these 4, and what scientific names would you give each?

And when is it best to use each of them?

.button .play, .pause{```
https://jsfiddle.net/9whjp0cw/5/

  .play, .pause```
https://jsfiddle.net/9whjp0cw/6/

` .button {`
https://jsfiddle.net/5td8aayv/24/

`  .button div {`
https://jsfiddle.net/5td8aayv/25/

[chrisofarabia]

.play .pause applies the style(s) to any element with the class ‘pause’ found nested within an element with the class ‘play’

.button {‘ applies the style to any element with the class ‘button’

.button div { applies the style(s) to any <div> found nested within an element with the class ‘button’

.button .play, .pause { applies the style(s) to any element with the class ‘play’ found nested within an element with the class ‘button’ AND any element with the class ‘pause’

As for when you use them, when you need to. It entirely depends on the structure of your HTML and what you are trying to achieve.

Probably the most important thing to note is the comma in the 4th rule. That indicates that you applying the style rules to multiple different selectors. All the others apply to elements nested inside others.