CSS Grouping and Nesting Selectors

Posted by champtutorial On Tuesday, 6 September 2011 0 comments

Grouping Selectors

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

EXAMPLE:

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, one style is specified for all elements with class="marked", and a third style is specified only for p elements within elements with class="marked":

Example

p

{

color:blue;

text-align:center;

}

.marked

{

background-color:red;

}

.marked p

{

color:white;

}

CHAMPTUTORIAL