The Brave Programmer - Blogging and coding
Not for the faint hearted
 

Blog Posts From The Brave Programmer

Minimize

Cascading Style Sheets – Selectors IV – Pseudo-Classes.

Mar19

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

Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled. In our previous articles we learnt a lot about selectors. In this post we will be concentrating on Pseudo-Classes.

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).

 

Pseudo-class Purpose IE F N W3C
:active Adds special style to an activated element 4 1 8 1
:focus Adds special style to an element while the element has focus - 1.5 8 2
:hover Adds special style to an element when you mouse over  it 4 1 7 1
:link Adds special style to an unvisited link 3 1 4 1
:visited Adds special style to a visited link 3 1 4 1
:first-child Adds special style to an element that is the first child of some other element 7 1 7 2
:lang Allows the author to specify a language to use in a specified element - 1 8 2

Tags:
Categories:
blog comments powered by Disqus
 
Blog Updates Via E-mail
 Blog Updates Via E-mail
Minimize

Do you want to receive blog updates via e-mail. Then just click on the link below. You will be redirected to Google's feed burner, where you can fill out a form. Supplying your e-mail address.

The subscription is managed entirely by Google's Feedburner. We cannot and do not collect your email address.

Subscribe to The Brave Programmer by Email

Print  
 

 

Latest Comments
 Latest Comments
Minimize
Powered by Disqus

Sign up with Disqus to enjoy a  surprise box of features

Print  
 
Blog Roll
 Blog Roll
Minimize
Print  
 
Categories
 Categories
Minimize
Print  
 
<h1>Search Blogs From The Brave Programmer</h1>
 

Search Blogs From The Brave Programmer

Minimize
Print  
 
Archive
 Archive
Minimize
Archive
<August 2017>
SunMonTueWedThuFriSat
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789
Monthly
Go
Print  
 
<h1>News Feeds (RSS)</h1>
 

News Feeds (RSS)

Minimize
Print  
 

Follow robertbravery on Twitter

Blog Engage Blog Forum and Blogging Community, Free Blog Submissions and Blog Traffic, Blog Directory, Article Submissions, Blog Traffic

View Robert Bravery's profile on LinkedIn

Mybyte

 

Robert - Find me on Bloggers.com

Tags
 Tags
Minimize
Print  
 
Contact Us Now
 Contact Us Now
Minimize
 

Email  us now or call us on 082-413-1420,  to host your website.

We design and develop websites. We develop websites that make a difference. We do Dotnetnuke Module development.

Web Masters Around The World
Power By Ringsurf
Print