ID & CLASS selectors, Pseudoclasses (cont.) - The Human Factor

The CLASS attribute has a similar function with the ID attribute. The difference is that you can have more than one element in your document with the same CLASS, so you can refer to them as a group.

For instance, let's say that we want some paragraphs in our document to have one kind of rendering and others a different kind of rendering. Here's our HTML document body:

<BODY>
<H1>Acme Computer Corp.</H1>
<P CLASS=special>Acme Computer Corporation is a
technology-based company that seeks to offer 
its customers the latest in technological 
innovation. Our products are created using the 
latest breakthroughs in computers and are designed
by a team of top-notch experts.</P>
<H1>Global Presence, Global 
Thinking</H1>
<P CLASS=special>We are based in Acmetown, USA, 
and have offices in most major cities around 
the world. Our goal is to have a global approach 
to the future of computing.</P>
<P>This Web site is where you can find
information on our products and the technologies 
we use and develop daily. You can browse our 
product catalog, order products online, read 
technical manuals published by Acme Press, and 
read press releases and other information about
ACC.<P>
<H1>What's New</H1>
<P CLASS=news>Dr. Arnold D. Propellerhead's
best-selling book, <cite>Transfirbulation
Technology</cite>, is now <a
href="books/OTP/">available
online</A> in its entirety. 
This book is a must-read for anyone interested 
in Object Transfirbulation and is the perfect 
companion for Acme's top-of-the-line Name
Sequencer, M.O.R.O.N.S.<P>
<P CLASS=news>Acme Computer Corp. has just
acquired ThinkMeUp, Inc., the industry leader 
in Object Costrabulation. This bold business 
move promises a combination of Acme's experience 
in Transfirbulation with TMU's exciting 
Constrabulation technology. 
<a href="news/TMUto.html">Read the 
full press release</A>.<P>
<HR>
<ADDRESS>
Comments to: 
<A HREF="mailto:[email protected]">Web Master</A>, 
Acme Computer Corp., One Acme Road, AcmeTown, USA.
</ADDRESS>
</BODY>
</HTML>

And here's a stylesheet for it:

P.special {
 font-size: bigger;
}
P.news {
 font-family: sans-serif;
 color: #0000A0;
}

Now the first two paragraphs, which belong to the class "special," will have the rendering specified after the first selector, and the remaining two will have the style specified after the P.news selector. Like the ID selector syntax, CLASS selectors consist of an optional element name followed by a period (.) and a class name. Omitting the element names, the style sheet comes out like this:

.special {
 font-size: bigger;
}
.news {
 font-family: sans-serif;
 color: #0000A0;
}

Here, however, there is a difference between the two stylesheets. In the case of ID, there can be only one element in a document with the specified ID, so leaving out the element name doesn't change the elements the selector matches. Here, however, any element can have a class of, say, "special," so specifying in the selector that the selected element must also be a paragraph narrows the scope of the selector.

I know you're itching to see this example in action, so here it is.

URL: https://www.webreference.com/html/tutorial5/7.html
Created: August 20, 1998
Revised: August 20, 1998

ID & CLASS selectors, Pseudoclasses (cont.) - The Human Factor

Find a programming school near you