data/nested-selector.css (752 bytes)

.grandchild1 {
	background-color:yellow;
}

.size {
	width:200px;
	height:50px;
}

.mini {
	width:100px;
	height:20px;
}

.parent1 {
	margin:10px;
	padding:10px;
	border:1px solid #ccc;

	.child1 {
		background-color:#0f0;

		.grandchild1 {
			background-color:#333;
		}
	}

	.child2 {
		background-color:#080;
	}

}

.parent2 {

	.child1 {
		background-color:#f00;

		.grandchild1 {
			background-color:#ccc;
		}
	}

	.child2 {
		background-color:#800;
	}

	margin:10px;
	padding:10px;
	border:1px solid #ccc;
}

/*
Don't remove spaces around '&'
*/
.parent3 {
	margin:10px;
	padding:10px;
	border:1px solid #ccc;

	& .child1 {
		background-color:#0f0;

		& .grandchild1 {
			background-color:#333;
		}
	}

	& .child2 {
		background-color:#080;
	}

}