Creating Selector Unions
Description
A list of comma-separated selectors selects the union of all of the elements that each of the individual selectors matches.
- Selector: selector1, selector2, selector3
- Matches: Selects the union of the elements matched by each individual selector
- CSS Version: 1
You can combine as many selectors as you require, each separated from the last by a comma.
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;
}
Example
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;
}<!--from w w w. ja va 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="w3canchor" href="http://w3c.org">Visit the W3C website</a>
</body>
</html>
The code above has a type selector (a) and an attribute selector ([lang|="en"]) separated by a comma (a, [lang|="en"]).