0
0
CSSmarkup~5 mins

Group selectors in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Group selectors let you style many elements at once. This saves time and keeps your code neat.

You want to make all headings and paragraphs the same color.
You want multiple buttons to share the same background style.
You want to apply the same font to different text elements.
You want to add the same margin to several sections.
You want to quickly change styles for many elements without repeating code.
Syntax
CSS
selector1, selector2, selector3 { 
  property: value; 
}
Separate each selector with a comma and a space.
All selectors share the same style rules inside the curly braces.
Examples
This makes all h1, h2, and h3 headings blue.
CSS
h1, h2, h3 {
  color: blue;
}
This sets paragraphs and elements with class 'note' to a larger font size.
CSS
p, .note {
  font-size: 1.2rem;
}
This styles all buttons and submit inputs with a green background and white text.
CSS
button, input[type="submit"] {
  background-color: green;
  color: white;
}
Sample Program

This page uses a group selector to style h1, p, and elements with class 'highlight' all the same way. They get dark red text and the Arial font.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Group Selectors Example</title>
  <style>
    h1, p, .highlight {
      color: darkred;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <h1>Welcome to Group Selectors</h1>
  <p>This paragraph shares the same style as the heading.</p>
  <div class="highlight">This div also uses the same color and font.</div>
  <p>Another paragraph with the same style.</p>
</body>
</html>
OutputSuccess
Important Notes

Group selectors help keep your CSS short and easy to read.

Remember to separate selectors with commas and spaces for clarity.

You can group any selectors: tags, classes, or IDs.

Summary

Group selectors let you style many elements with one rule.

Use commas to separate selectors inside the CSS rule.

This saves time and keeps your code clean and simple.