CSS Grouping and Nesting Selectors

Grouping Selectors

In style sheets there are often elements with the same style.

h1 { color:green; } h2 { color:green; } p { color:green; }

To minimize the code, you can group selectors.
Separate each selector with a comma.
In the example below we have grouped the selectors from the code above:

Example h1,h2,p { color:green; }

---

Nesting Selectors

It is possible to apply a style for a selector within a selector.
In the example below, one style is specified for all p elements, and a separate style is specified for p elements nested within the "marked" class:

Example

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:blue;
}
.marked p
{
color:white;
}