Written by:
2009/03/19 09:17 AM 

We have looked at Attribute Selectors in our last post. In this post we will be looking at Pseudo-Classes. Up till now we have discussed selectors mainly based on elements within the document tree. What happens when you to style something where there is no CSS selector available, like the state of a hyperlink (e.g.. active or visited).

Pseudo-classes allow you to format items that are not in the document tree. They include:

• :first-child
• :link
• :visited
• :hover
• :active
• :focus
• :lang(n)

The Pseudo-class takes the following syntax: selector:pseudo-class {property: value}. CSS classes can also be used with pseudo-classes as in the following syntax: selector.class:pseudo-class {property: value}

One on the most common uses for Pseudo-classes is in hyperlinks. I am sure we have all used these, but have never considered what they are or what they mean. With pseudo-classes, you can style links in different ways in each of the four states.

• a:link is the selector for normal links
• a:visited is the selector for visited links
• a:hover is the selector for hover state
• a:active is the selector for active links

Because of the specific nature of Pseudo-classes, there is a order that one must adhere to in order to avoid conflict. Therefore link and link pseudo class selectors should always be used in the following order.

1. a {}
2. a:link {}
3. a:visited {}
4. a:hover {}
5. a:active {}

A link can have various states, they cane be active, visited, unvisited, or when you mouse over a link it can be displayed in a different way. Look at the following examples:

• a:link {color: #FF0000} - unvisited link
• a:visited {color: #00FF00} - visited link
• a:hover {color: #FF00FF} - mouse over link
• a:active {color: #0000FF} - selected link

Pseudo-classes can be combined with CSS classes as in the following example:

a.red:visited {color: #FF0000}

:first-child - :last-Child

The :first-child : last-child pseudo-classes matches specific elements that are either the first child or last child of another element.

Note: This might not work in your browser. Not all browsers render this CSS correctly. I am working on a way to show this effect for all browsers.

Note: For :first-child to work in IE a document type must be declared.

The :first-child pseudo-class matches an element that is the first child of some other element.

In the following example, the selector matches any P element that is the first child of a DIV element. The rule suppresses indentation for the first paragraph of a DIV:

The :first-child pseudo-class matches an element that is the first child of some other element.

In the following example, the selector matches any P element that is the first child of a DIV element. The rule suppresses indentation for the first paragraph of a DIV:

DIV > P:first-child { text-indent: 0 }

This selector would match the P inside the DIV of the following fragment:
<P> The last P before the note.
<DIV class="note">
   <P> The first P inside the note.
</DIV>

but would not match the second P in the following fragment:
<P> The last P before the note.
<DIV class="note">
   <H2>Note</H2>
   <P> The first P inside the note.
</DIV>

Browser support:

Not all browsers support CSS in the same way. This has been a continual problem for many a developer. Following is a short list of the browser support for Pseudo-Classes. Thanks to w3schools.com 

IE: Internet Explorer, F: Firefox, N: Netscape. 

W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2).

TrackbackPrint

Tags:

Categories:

Location: BlogsThe Brave Programmer