Articles: 843 | Categories: 148   
   
   
Home Articles Contact Us
 
 
 
 
CSS Grouping and Nesting Selectors (0 Comments)
Admin: Posted Date: April 4, 2010

In style sheets there are often elements with the same style.To minimize the code, you can group selectors.Separate each selector with a comma.

CSS Grouping and Nesting Selectors

Grouping Selectors

In style sheets there are often elements with the same style.

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

To minimize the code, you can group selectors.

Separate each selector with a comma.

In the example below we have grouped the selectors from the code above:

Example

h1,h2,p
{
color:green;
}

Nesting Selectors

It is possible to apply a style for a selector within a selector.

In the example below, one style is specified for all p elements, and a separate style is specified for p elements nested within the "marked" class:

Example

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

 

 
 
Add a Comment:
 
(You must be signed in to comment on an article. Not a member? Click here to register)
   
Title:

Comments: