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;
}

 Try It! 

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;
}

 Try It!