CSS Selector - How to use CSS group Selector

To style several elements with the same style, we can separate each element name with a comma. In this way we group the selectors together and style them the same time. element,element is called group selector.

For example, in style sheets there are often elements with the same style.

h1{color:green;}
h2{color:green;}
p{color:green;}

We can group selectors. Separate each selector with a comma.

h1,h2,p{
   color:green;
}

Summary

CSS Version: 1

CSS Syntax

element, element { 
   style properties 
}

Browser compatibility


`element, element`	Yes	Yes	Yes	Yes	Yes

Example

An example showing how to use element,element CSS selector.

<!DOCTYPE html>
<html>
<head>
<style>
h1,p<!--from  w  w  w . j a  v  a 2  s. co m-->
{
   background-color:red;
}
</style>
</head>
<body>
    <h1>h1</h1>
    <p>paragraph.</p>

</body>
</html>

Click to view the demo

Example 2

The following code provides an example of creating a union of selectors.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a, [lang|="en"] {
  border: thin black solid;
  padding: 4px;
}<!-- w ww  .java  2 s . c o m-->
</style>
</head>
<body>
  <a id="anchor" class="class1 class2" href="http://java2s.com">
    Visit the website </a>
  <p>
    This is a<span lang="en-uk" class="class2">test</span>.
  </p>
  <a id="myAnchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>

Click to view the demo

The code above has a type selector (a) and an attribute selector ([lang|="en"]) separated by a comma (a, [lang|="en"]).