Selector Grouping — SitePoint

We can group selectors using a comma (,) separator. The following declaration block will apply to any element that matches either of the selectors in the group:

td, th {
  ⋮ declarations
}

We can think of the comma as a logical OR operator, but it’s important to remember that each selector in a group is autonomous. A common beginner’s mistake is to write groups like this:

#foo td, th {
  ⋮ declarations
}

A beginner might think that the above declaration block will be applied to all td and th elements that are descendants of the element with an ID of “foo”. However, the selector group above is actually equivalent to this:

#foo td {
  ⋮ declarations
}
th {
  ⋮ declarations
}

To achieve the true goal, write the selector group as follows:

#foo td, #foo th {
  ⋮ declarations
}

Important: No Trailing Comma Needed Don’t leave a comma after the last selector in the group!

Frequently Asked Questions about CSS Selector Grouping

What is the purpose of CSS selector grouping?

CSS selector grouping is a technique used in CSS to apply the same style rules to multiple selectors. Instead of writing the same rules multiple times for different selectors, you can group them together and write the rules once. This not only makes your CSS code cleaner and more readable, but it also reduces the size of your CSS file, which can improve your website’s load time.

How do I group selectors in CSS?

To group selectors in CSS, you simply list the selectors you want to group together, separated by commas, followed by the declaration block. For example, if you want to apply the same style to h1, h2, and p elements, you would write it as follows:
h1, h2, p {
color: blue;
}
This will apply the color blue to all h1, h2, and p elements.

Can I group different types of selectors together?

Yes, you can group any types of selectors together, including element selectors, class selectors, id selectors, and more. For example, you could group an element selector with a class selector like this:
h1, .intro {
color: blue;
}
This will apply the color blue to all h1 elements and any element with the class “intro”.

What happens if one of the selectors in a group has a different style rule?

If one of the selectors in a group has a different style rule, the individual rule will override the group rule. This is because in CSS, the last rule defined takes precedence. For example, if you have the following code:
h1, h2, p {
color: blue;
}

p {
color: red;
}
The p elements will be red, not blue, because the individual rule for p comes after the group rule.

Can I group selectors that are nested within other elements?

Yes, you can group selectors that are nested within other elements. This is often done to apply styles to specific parts of a webpage. For example, you could group selectors to style all h1 and p elements within a div element like this:
div h1, div p {
color: blue;
}
This will apply the color blue to all h1 and p elements that are inside a div element.

Can I use pseudo-classes and pseudo-elements in a group of selectors?

Yes, you can use pseudo-classes and pseudo-elements in a group of selectors. For example, you could group selectors to style the hover state of a link and the before pseudo-element of a paragraph like this:
a:hover, p::before {
color: blue;
}
This will apply the color blue to the hover state of all links and the before pseudo-element of all paragraphs.

What is the difference between grouping selectors and chaining selectors?

Grouping selectors and chaining selectors are two different techniques in CSS. When you group selectors, you apply the same style rules to multiple selectors. When you chain selectors, you apply style rules to an element that matches all of the chained selectors. For example, h1, h2 is a group of selectors, while h1.h2 is a chained selector.

Can I group selectors in media queries?

Yes, you can group selectors in media queries. This can be useful for applying different styles to different screen sizes. For example, you could group selectors to change the color of h1 and p elements on small screens like this:
@media (max-width: 600px) {
h1, p {
color: blue;
}
}
This will apply the color blue to all h1 and p elements when the screen size is 600px or smaller.

How can I debug issues with grouped selectors?

Debugging issues with grouped selectors can be done using the browser’s developer tools. You can inspect the element to see which styles are being applied and from which selectors. If a style is not being applied as expected, check for typos in your selectors, ensure the correct specificity, and make sure the style is not being overridden by another rule.

Are there any limitations or drawbacks to using grouped selectors?

While grouped selectors can make your CSS more concise and easier to manage, they can also make your CSS harder to read if overused. Too many selectors in a group can make it difficult to understand which elements the styles are being applied to. It’s also important to remember that all selectors in a group will share the same specificity, which can affect how styles are applied if you have other conflicting rules.