CSS and nested grouping
Grouping Selectors
There are many elements that have the same style in the stylesheet.
h1
{
color: green;
}
h2
{
color: green;
}
p
{
color: green;
}
{
color: green;
}
h2
{
color: green;
}
p
{
color: green;
}
To minimize the code, you can use the packet selector.
Each selector Used commas.
In the following example, we use the code above grouping selectors:
Nested selectors
It may apply to Selector Selector interior styles.
In the following example, a set of three styles:
- Specify a style for all p elements
- = "Marked" elements specify a style for all class
- = "Marked" p element within an element specifies a style for all class
Examples
p
{
color: blue;
text-align: center;
}
.marked
{
background-color: red;
}
.marked p
{
color: white;
}
{
color: blue;
text-align: center;
}
.marked
{
background-color: red;
}
.marked p
{
color: white;
}
try it"