CSS Selector list Selector


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;


element,element {
    css declarations;


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.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview