CSS Selector list Selector

Description

The CSS selector list selector, also known as the comma selector, is a way to select multiple elements with a single CSS rule. It is a comma-separated list of selectors, and the CSS rule will be applied to all of the selected elements.

For example, the following CSS rule will apply the color: red style to all h1 and h2 elements:

h1, h2 {
  color: red;
}

The selector list selector can be used with any type of selector, including element selectors, class selectors, ID selectors, and attribute selectors. It can also be used with pseudo-classes and pseudo-elements.

Here are some more examples of selector list selectors:

/* Selects all `p` elements with the `intro` class and all `ul` elements with the `red` class. */
.intro, ul.red {
  color: blue;
}

/* Selects all `a` elements with the `href` attribute set to `https://example.com`. */
a[href="https://example.com"] {
  text-decoration: none;
}

/* Selects all `li` elements that are the first child of a `ul` element. */
ul > li {
  margin-bottom: 10px;
}

Syntax

element,element {
    css declarations;
}

Example

span, p {
   color: #3366ff;
   background: #ffff99;
}

Give it a Try

Click the button below to experiment with this selector.

Give it a Try!

Browser Support

The following table will show you the current browser support for the CSS Selector list selector.

Desktop
Yes	Yes	Yes	Yes	Yes

Tablets / Mobile
Yes	Yes	Yes	Yes	Yes	Yes