CSS Basic
CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How ToCSS Styling
Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling TablesCSS Box Model
CSS Box Model CSS Border CSS Outline CSS Margin CSS PaddingCSS Advanced
CSS Grouping/Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attribute Selectors CSS SummaryCSS Examples
CSS Examples CSS Quiz CSS CertificateCSS References
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEXCSS 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;
}
{
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:
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;
}
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}
Try it yourself »
Your suggestion:
Close [X]
Thank You For Helping Us!
Your message has been sent to W3Schools.
Close [X]
