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:
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;
} |
Try it yourself »
|
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 4000 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
