ID & CLASS selectors, Pseudoclasses - The Human Factor

ID & CLASS selectors, Pseudoclasses

CSS Selector syntax is actually very complex. There are very powerful ways of assigning styles to specific elements. In the long run, you will probably find yourself not using the STYLE attribute at all; it will be a lot easier to pinpoint a specific element instance using a selector and assigning a specific style to it.

This is accomplished using two new attributes that apply to all elements in HTML. These attributes are ID and CLASS.

Both ID and CLASS accept values called name tokens, a term borrowed from SGML. Name tokens may contain only English characters, digits, the dash (-) and period (.) characters.

If you assign an element an ID attribute, you single it out in a document; you have effectively given it a name. This is why it is not allowed to have more than one ID attribute in your document with the same value. Since the value of the ID attribute uniquely identifies an element, it would be wrong to give more than one element the same ID.

Here is an example (I will list only the document body for the sake of brevity):

<BODY>
<H1 ID="first">Acme Computer Corp.</H1>
<P>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 ID="second">Global Presence, Global 
Thinking</H1>
<P>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. Have a look at our product 
catalog for some examples of our innovative
approach.</P>
<HR>
<ADDRESS>
Comments to: 
<A HREF="mailto:[email protected]">Web Master</A>, 
Acme Computer Corp., One Acme Road, AcmeTown, USA.
</ADDRESS>
</BODY>
</HTML>

Here, the first H1 element has an ID of "first", and the second H1 element has an ID of "second." These are simply names we have chosen for them; the words themselves have no special significance. Now, however, we can use a special selector syntax to refer to these elements specifically, like this:

H1#first { ...declarations... }
H1#second { ...declarations... }

The selectors mean, respectively, "the H1 element that has an ID of 'first'" and "the H1 element that has an ID of 'second'." We can also write them like this:

#first { ...declarations... }
#second { ...declarations... }

These selectors mean "the element that has an ID of 'first'" and "the element that has an ID of 'second'". This is effectively the same as before, as there can only be one element in the whole document that has the ID value of "first" or "second."

The ID attribute gives us a way of singling out elements in our document and giving them specific rendering styles. But what happens when we want to group two or more elements and assign the same style to them? Enter the CLASS attribute.

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

ID & CLASS selectors, Pseudoclasses - The Human Factor

Find a programming school near you