Grouping & Contextual Selectors
|
| ||||
| ||||
|
|
CSS1 defines two more types of selectors: Grouping and Contextual selectors.
Grouping selectors group two or more selectors into one by concatenating them, separated by commas. Here is an example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<TITLE>Example HTML Document
Showcasing Basic CSS Selectors</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {
color: blue;
background-color: cyan;
font-family: Helvetica, Arial, sans-serif;
}
H1, H2, H3 {
color: red;
font-family: Garamond, Times, sans-serif;
}
-->
</STYLE>
<BODY>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<P>A paragraph. A paragraph. A paragraph.
A paragraph. A paragraph. A paragraph. A paragraph.
A paragraph. A paragraph. A paragraph. A paragraph.
A paragraph. A paragraph.
In this example, the selector H1, H2, H3
matches either H1 elements or H2 elements or H3 elements.
You can group any selector in this way. Slightly modifying the page
above, the H1, H2, H3.special selector matches
H1 elements, H2 elements or H3
elements with a class of special, but not other
H3 elements.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML>
<TITLE>Example HTML Document Showcasing Basic CSS Selectors</TITLE>
<STYLE TYPE="text/css">
<!--
BODY {
color: blue;
background-color: cyan;
font-family: Helvetica, Arial, sans-serif;
}
H1, H2, H3.special {
color: red;
font-family: Garamond, Times, sans-serif;
}
-->
</STYLE>
<BODY>
<H1>Heading 1</H1>
<H3>Heading 3</H3>
<P>A paragraph. A paragraph. A paragraph. A paragraph. A paragraph. A
paragraph. A paragraph. A paragraph. A paragraph. A paragraph. A
paragraph. A paragraph. A paragraph.
<H3 CLASS="special">Heading 3 Class Special</H3>
<P>A paragraph. A paragraph. A paragraph. A paragraph. A paragraph. A
paragraph. A paragraph. A paragraph. A paragraph. A paragraph. A
paragraph. A paragraph. A paragraph.
