2

I recently encountered this syntax which is new to me. I tried to do some experiments to see what it actually does but can't say for sure, so I need help. This is the code in css:

.animation-element.slide-left.testimonial .content {
  some styling statements;
}

Is there a difference between putting a space in-between the selectors and not doing it? And if that's the case, what is the difference?

Albzi
  • 15,431
  • 6
  • 46
  • 63
Thomas Helsing
  • 45
  • 6

1 Answers1

3

The difference between a space and not a space is like this:

<div class="animation-element slide-left testimonial">
    <div class="content">
        Some content
    </div>
</div>

So .animation-element.slide-left.testimonal is all one element with multiple classes. Then the .content after that is getting a descendant element of the element before that.

Albzi
  • 15,431
  • 6
  • 46
  • 63
  • You have a full doc on the CSS selectors here: https://www.w3schools.com/cssref/css_selectors.asp – Zahori May 23 '18 at 07:12
  • 1
    Maybe I'm being silly but that doesn't state elements with multiple classes? Although overall that is a really helpful sheet :) @Zahori – Albzi May 23 '18 at 07:26
  • 1
    Yes, I know but it explain which seletor do ;) – Zahori May 23 '18 at 07:29
  • 1
    "is getting a child element" — Not necessarily a child. **Any** descendant. The child combinator is `>`. – Quentin May 23 '18 at 07:51
  • Sorry, that's what I meant, any child/descendant element. I think it might be my use of language that meant one thing to me but another to someone else :) Will change thanks @Quentin – Albzi May 23 '18 at 07:52
  • Thanks everyone. I didn't know how to formulate the question, otherwise I think I would have found all your suggested links. :/ – Thomas Helsing May 23 '18 at 16:09