Grouping & Contextual Selectors - How do I Select Thee, Let Me Count the Ways - HTML With Style | WebReference

Grouping & Contextual Selectors - How do I Select Thee, Let Me Count the Ways - HTML With Style

Front Page1234567

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"
 "https://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"
 "https://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.

Front Page1234567

https://www.internet.com

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial6/5.html
Created: September 24, 1998
Revised: September 24, 1998