WH Internet Blog

Tuesday, 6 November 2007

First Child pseudo-class

A useful tool to add to your CSS code. By using the :first-child statement you can affect the first element contained within another.

As a working example I used thit to create a menu where I wanted border-right: 1px solid #FFFFFF; but also wanted a left border on the opening menu item only. By using the first:child statement you can affect only the opening element. The code works like this:

#navMenu li:first-child {
border-left: 1px solid #FFFFFF;
}

Simply apply this after the exising style for #navMenu li and you have the required result.

Full details on this pseudo-class and other tips can be found at:
http://meyerweb.com/eric/articles/webrev/200007b.html

No comments: