A, B
A comma combines several selectors into a single rule, to give them the same styles without repeating declarations.
Example
#input,
select,
textarea {
padding: 8px 10px;
border: 1px solid #52525b;
border-radius: 8px;
background: #18181b;
color: inherit;
font: inherit;
}<form class="stage" style="display: grid; gap: 8px;">
<input placeholder="First name">
<select><option>CSS course</option><option>HTML course</option></select>
<textarea rows="2" placeholder="Message"></textarea>
</form>Definition and usage
#A selector list lets you write declarations once for multiple selectors. Instead of three separate rules for h1, h2, and h3, h1, h2, h3 { … } is enough. Each selector on the list works independently, and an element that matches any of them gets the styles.
Specificity is counted separately for each selector on the list. In the rule #logo, p, the #logo element gets the weight (1, 0, 0), while a plain paragraph only gets (0, 0, 1). The list doesn’t raise the weight of the weaker selectors.
The most important pitfall: if even one selector on the list is invalid or unknown to the browser, the whole rule gets dropped. A typo like a:hovr or another browser’s prefix can disable the styles for every remaining selector. The exception is lists inside :is() and :where(), which simply skip over invalid entries.
Write long lists with one selector per line, with a comma at the end of every line except the last. A comma after the last selector is an error that invalidates the entire rule.
Syntax
#A, B, C { property: value; }Example lists
#- The heading and both paragraphs get the same style from a single rule.
- A list can mix different kinds of selectors: a class alongside tag names.
- A typo in the second selector invalidates the whole rule. Even the plain paragraphs stay gray.
- The same list inside
:is()is forgiving: the invalid selector gets skipped, and the paragraphs get the style.
Example lists in practice
#h3, p
h3, p { background: #7c3aed; color: #fff; }p, p:hovr
p, p:hovr { background: #7c3aed; color: #fff; }:is(p, p:hovr)
:is() is forgiving: the invalid selector gets skipped, and the paragraphs get the style.:is(p, p:hovr) { background: #7c3aed; color: #fff; }More examples
#.link:hover,
.link:focus-visible {
color: #fff;
text-decoration-thickness: 2px;
}<style>.link { color: #c4b5fd; text-underline-offset: 4px; }</style>
<p style="margin: 0;">Hover over <a class="link" href="#">this link</a> or click the preview and tab to it with the keyboard.</p>Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Put each selector on its own line. It’s then easier to spot a typo that would disable the entire rule.
- Write selectors with browser prefixes, like
::-webkit-…and::-moz-…, in separate rules. A browser that doesn’t recognize one of them rejects the whole list. - Shorten a long list with a repeating start using
:is():.card :is(h2, h3, h4)instead of three full selectors.
Related entries
#- :is()Matches an element against any selector in a list. Shortens long, repetitive selectors into a single notation.
- :where()Works like :is(), but always has zero specificity. Ideal for base styles that should be easy to override.
- SpecificityA selector’s weight, which decides which rule wins when several rules set the same property on the same element.
- Type selectorSelects every element with a given tag name, for example every p paragraph or every li list item.
- .classSelects elements that have the given class in their class attribute. The most commonly used selector for styling components.
Spotted a mistake or missing an example? Write to us.