Showing posts with label CSS Grouping or Nesting. Show all posts
Showing posts with label CSS Grouping or Nesting. Show all posts

Saturday, August 18, 2012

CSS Grouping or Nesting


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

Try it yourself »


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

Try it yourself »