Nested CSS

We sometimes need to give the same class different visual. Also sometimes a certain element can have different style depending on its placement. These can be achieved by using nested CSS.

Lets clear it with a few example –

.abc{ float:left; }
.xyz .abc{ float:none;}

In the above example class abc will have float:left.
But when an element with class abc is within an element with class xyz it will not follow float:left

p{ font-weight:bold; }
.abc p{ font-weight:normal;}

In the above example the text within p tag will always be bold, unless the p tag is within an element with class abc