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

You might have noticed that the hyperlinks in our document have their standard rendering. Traditionally, this has been blue underlined text, though this changes from browser to browser. Most browsers also display links in a different color if they have been visited by the user.

So what if we want to change the rendering of our hyperlinks? What selector should we use? Before you rush out and scream "A!", let me remind you that the A element can also be used to define hyperlink tails, which we are not interested in. We want to select only anchors that are hyperlink heads. How do we do this? We use pseudoclasses.

Pseudoclasses are similar to classes, but instead of representing the value of the CLASS attribute of a few elements, they represent a special characteristic of that element. The pseudoclasses that I will tell you about in this tutorial are related to the A element, and are link and visited.

The link pseudoclass refers to A elements that are hyperlink heads that have not been visited. The visited pseudoclass refers to A elements that are hyperlink heads and have been visited. So, the following stylesheet:

A:link { color: green; }
A:visited { color: red; }

Makes all unvisited links green and all visited links red. Notice the syntax, which is similar to class syntax, but uses a colon (:) instead of a period.

Enough about selectors for now. Let's see what you've learned:

1. The most simple selector is only an element name, and matches any element of that type
2. The element name can optionally be followed by a hash mark (#) and an ID value, matching the element of the specified type with that ID.
3. It can also be optionally followed by a period (.) and a CLASS value, matching all elements of the specified type with that CLASS.
4. It can also be optionally followed by a colon (:) and a pseudoclass, matching all elements of the specified type belonging to that pseudoclass.
5. If the element name is omitted when an ID, CLASS or pseudoclass is specified, then the selector matches all elements, of any type, that have that ID, CLASS or pseudoclass.

That's basic selector syntax, and is probably enough for your needs for now. Later on I'll devote an entire tutorial to discussing selector syntax for more advanced cases.

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

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