Is there a difference if I put a space in CSS sele

Question

This question already has answers here:

What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? (4 answers)

Closed 5 years ago.

Is there a difference between these?

.someClass.anotherClass

.someClass .anotherClass

Does the white space make a difference. If yes, what difference does it make?

Answer 1

Yes it makes a difference. Using a space is the descendant selector. In your example, anotherClass must be a descendant of someClass.

<div class="someClass">
    <div class="anotherClass"></div>
</div>

Without a space, you are targeting elements that match all classes specified. In your example, matched elements must have both someClass and anotherClass.

<div class="someClass anotherClass">
</div>

Answer 2

.someClass.anotherClass will select below element

<div class="someClass anotherClass"></div>

.someClass .anotherClass (descendant selector)

<div class="someClass">
<span class="anotherClass"></span> //this will be selected
</div>

Answer 3

.someClass.anotherClass will work in the case of if your class name is "someClass anotherClass", Means you have only one class including space between name.

.someClass .anotherClass It will not affect to your first class['someClass'] code if you have two different classes. Only second class with be affected.

Hope u will get the point.