Home → Tutorials → CSS Intermediate Tutorial →

Grouping and Nesting

HTML Dog, The Book HTML Dog book cover

HTML Dog is hosted by Titan Internet

Grouping

You can give the same properties to a number of selectors without having to repeat them by separating the selectors by commas.

For example, if you have something like:


h2 {
	color: red;
}

.thisOtherClass {
	color: red;
}

.yetAnotherClass {
	color: red;
}

You could make it:


h2, .thisOtherClass, .yetAnotherClass {
	color: red;
}

Nesting

If the CSS is structured well, there shouldn't be a need to use many class or ID selectors. This is because you can specify properties to selectors within other selectors.

For example:


#top {
	background-color: #ccc;
	padding: 1em
}

#top h1 {
	color: #ff0;
}

#top p {
	color: red;
	font-weight: bold;
}

Removes the need for classes or ID's if it is applied to HTML that looks something like this:


<div id="top">

	<h1>Chocolate curry</h1>

	<p>This is my recipe for making curry purely with chocolate</p>

	<p>Mmm mm mmmmm</p>

</div>

This is because, by separating selectors with spaces, we are saying 'h1 inside ID top is colour #ff0' and 'p inside ID top is red and bold'.

This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.