Some time ago using of pseudo-class as :first and :first-child was impossible due to browsers that didn't support CSS enough. Nowadays we have almost ideal browsers such as Firefox 2 or Opera 9, which allows us to make really interesting CSS pirouettes.
For example, horizontal list menu with separators (pipes) in ancient CSS days was handcoded:
Item1 | Item2 | Item3 | Item4
Now we will use modern smart browsers. We will take a simple list without separators:
<ul>
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
and add separators BY CSS itself with this style:
CSS
Now we have:
Thats all! The latest line deletes left border of first element in simple and elegant way. Here you are - so called piped list.
Well, there is more sophisticated way: li:after {content:" | "}, but you can try it yourself.
Here is an another interesting approach:
20-03-2007
Write a comment