CSS groupingandNestedSelectors
Grouping selectors
There are many elements in the stylesheet that share the same styles.
h1 {
color:green;
}
h2 {
color:green;
}
p {
color:green;
}
To minimize code, you can use grouping selectors.
Each selector is separated by a comma.
In the example below, we use grouping selectors for the above code:
Nesting selectors
It may apply to the styles of selectors within selectors.
The following example sets four styles:
- p{ }: For allpThe element specifies a style.
- .marked{ }: For allclass="marked"The element specifies a style.
- .marked p{ }: For allclass="marked"inside the elementpThe element specifies a style.
- p.marked{ }: For allclass="marked"ofpThe element specifies a style.
Example
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
p.marked{
text-decoration:underline;
}
Try it Yourself »
other extensions