1. Home
  2. CSS and nested grouping

The best CSS and nested grouping Tutorial In 2024, In this tutorial you can learn Grouping Selectors,Examples,Nested selectors,Examples,

CSS and nested grouping

Grouping Selectors

There are many elements that have the same style in the stylesheet.

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

To minimize the code, you can use the packet selector.

Each selector Used commas.

In the following example, we use the code above grouping selectors:

Examples

h1,h2,p
{
color:green;
}


Nested selectors

It may apply to Selector Selector interior styles.

In the following example, a set of three styles:

  • Specify a style for all p elements
  • = "Marked" elements specify a style for all class
  • = "Marked" p element within an element specifies a style for all class

Examples

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


Hot Tools

Other Tools

Online Tutorial

Website Navigation

CSS and nested grouping
10/30