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:webmaster@acme.com">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.
