Grouping selectors in CSS helps to select multiple elements simultaneously to use the style properties. The CSS is used to style properties on a single ID name, class name or a single element. The grouping selector uses element names with the comma in the style tag of the css files. We can use multiple properties and their values for the grouping selector.
Syntax
The syntax below demonstrates the grouping selector in CSS.
selector1, selector2, ...... selectorN {
property: value;
}
Description:
- The selector can be elements, class name, and id name of the elements.
- The comma works as a separator for two elements of the group selector.
- We can select the id, class, and element names in the same pattern or use mixed to refer to the HTML elements.
Examples
The upcoming instances showcase the grouping selector for the CSS attributes.
Example 1:
The illustration demonstrates the fundamental grouping selector in CSS with an appealing design. All elements within the div tag can be utilized.
<!DOCTYPE html>
<html>
<head>
<title> Grouping selector in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 225px;
width: 420px;
border : 2px solid black;
}
h3, b, p, h5{
font-style: italic;
color: red;
border : 1px solid black;
margin-top: 4px;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Basic Grouping Selector in CSS
</h3>
<h5 id = "class2">
Grouping selectors in CSS helps to select multiple elements simultaneously to use the style properties.
</h5>
<p>
Mostly, CSS is used to style properties on a single ID name, class name, or element. The grouping selector uses element names with commas in the style tag and css files.
</p>
<b>
We can use multiple properties and their values for the grouping selector.
</b>
</div>
</body>
</html>
Output:
Example 2:
The illustration demonstrates the fundamental grouping selector in CSS with an appealing design. Elements can be targeted by their class names.
<!DOCTYPE html>
<html>
<head>
<title> Grouping selector in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 225px;
width: 420px;
border : 2px solid black;
}
.class1, .class2, .class3{
font-style: italic;
color: green;
border : 1px solid red;
margin-top: 4px;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Basic Grouping Selector in CSS with Class
</h3>
<h5 class = "class2">
Grouping selectors in CSS helps to select multiple elements simultaneously to use the style properties.
</h5>
<p>
Mostly, CSS is used to style properties on a single ID name, class name, or element. The grouping selector uses element names with commas in the style tag and css files.
</p>
<b class = "class3">
We can use multiple properties and their values for the grouping selector.
</b>
</div>
</body>
</html>
Output:
The displayed output illustrates the selector that targets a specific group for styling.
Example 3:
The example demonstrates the grouping selector within the negation selector in CSS. It allows for specifying multiple elements to exclude using the not selector along with various CSS properties.
<!DOCTYPE html>
<html>
<head>
<title> Grouping selector in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 225px;
width: 420px;
border : 2px solid black;
}
:not(div, h3, h5, body, html){
font-style: italic;
color: green;
border : 1px solid red;
margin-top: 4px;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Basic Grouping Selector in CSS with Class
</h3>
<h5 class = "class2">
Grouping selectors in CSS helps to select multiple elements simultaneously to use the style properties.
</h5>
<p>
Mostly, CSS is used to style properties on a single ID name, class name, or element. The grouping selector uses element names with commas in the style tag and css files.
</p>
<b class = "class3">
We can use multiple properties and their values for the grouping selector.
</b>
</div>
</body>
</html>
Output:
The provided image displays the grouping selector for the negation selector.
Example 4:
The provided instance demonstrates the utilization of the grouping selector with both the page's id and class name concurrently.
<!DOCTYPE html>
<html>
<head>
<title> Grouping selector in CSS </title>
<meta charset = "utf-8" name = "viewport" content = "width=980, initial-scale=1.0">
<style>
.mains{
background-color: beige;
height: 225px;
width: 420px;
border : 2px solid black;
}
.class1, .class2, #id1{
font-style: italic;
background-color: grey;
color: white;
border : 1px solid pink;
margin-top: 4px;
}
</style>
</head>
<body>
<div class = "mains" style = "">
<h3 class = "class1">
Basic Grouping Selector in CSS with class and Id
</h3>
<h5 class = "class2">
Grouping selectors in CSS helps to select multiple elements simultaneously to use the style properties.
</h5>
<p id = "id1">
Mostly, CSS is used to style properties on a single ID name, class name, or element. The grouping selector uses element names with commas in the style tag and css files.
</p>
<b class = "class3">
We can use multiple properties and their values for the grouping selector.
</b>
</div>
</body>
</html>
Output:
The group selector displayed above indicates the styling for a specific group.
Conclusion
The grouping selector is an essential and key element for managing various elements across multiple web pages.