CSS Group and Nested Selector
Group selector
There are many elements with the same style in the style sheet.
h1 { color:green; } h2 { color:green; } p { color:green; }
In order to minimize the code, you can use group selectors.
Each selector is separated by a comma.
In the following example, we use the group selector for the above code:
Example
h1,h2,p { color:green; }
Nested selector
It may apply to the style of the selector inside the selector.
Four styles are set in the following examples:
p{ } : Specify a style for all p elements.
.marked{ } : Specify a style for all elements with class="marked" .
.marked p{ } : Specify a style for all p elements in class="marked" elements .
p.marked{ } : for all class = "marked" the p element specifies a pattern.
Example
p { color:blue; text-align:center; } .marked { background-color:red; } .marked p { color:white; } p.marked { text-decoration:underline; }