Wednesday, July 1, 2015

With the help of examples explain grouping and nesting of css selectors



Grouping selectors: In css the designer can reduce the code by simply groping together selectors with the same property values.
For ex : h1 {color: green;}
h2 {color: green;}
p {color: green;}
As you can see from the above code the all the elements have the same property. To avoid rewriting the same code again and again the user can simply group the selectors by separating each selector with a comma.
Grouped selectors : h1,h2,p {color: green;}

Nesting selectors: This enables the user to specify a style for a selector within a selector.
For ex.

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

In the above example separate properties are assigned for p and the .marked class. But the last value that is .marked p implies that the property will apply to p elements with class defined as .marked.

1 comment: