What is the difference between two selectors separated by a space and two which aren't?

[codeispoetry]

<div class="main">
	<div class="content"></div>
	<div class="content"></div>
	<div class="content"></div>
	<div class="content"></div>
	<div class="content"></div>
</div>

.main {
	margin: 20px auto;
}
.content {
	margin: 10px auto;
}

But I want that the last content class shouldn’t have any bottom margin.

so how should we write?

#This one →

.main.content {
	margin-bottom:0px;
}

#or this one →

.main .content {
	margin-bottom:0px;
}

Difference between the two is that in one of the classes are separated by a space, and in another, they are not.

[James_Hibbard]

Using .main.content (with no space) will target any elements that have a class of both main and content. This is none in your case.

Using .main .content (with a space) will target any elements with a class of .content that are descendants of an element with a class of .main. This will be all of them in your case.

If you are trying to target the final element with a class of content use the :last-child pseudo-class.

.main {
  margin: 20px auto;
}

.content {
  margin: 10px auto;
}

.content:last-child {
  margin-bottom:0px;
}

This pseudo-class represents the last element among a group of sibling elements.

See also:

Multiple Class / ID and Class Selectors | CSS-Tricks