The first-child pseudo-class : Pseudo Class « Style Basics « HTML / CSS

HTML / CSS » Style Basics » Pseudo Class 
The first-child pseudo-class
  
<!DOCTYPE html
<html
<head> 
<title></title> 
<style type="text/css"
body font-family: sans-serif; 
text-decoration: none; /* don't underline links */ 
li float: left; /* horizontal list */ 
padding: .25em; 
margin-right: 5px; 
border: 2px black outset; /* shaded buttons */ 
list-style-type: none; 
li:first-child background-color: black; 
li:first-child a color: white; 
</style> 
</head> 
<body
<ul> 
<li><a href="home.html">Home</a></li> 
<li><a href="about.html">About</a></li> 
<li><a href="contact.html">Contact Us</a></li> 
</ul> 
</body
</html

   
    
  
Related examples in the same category
1.The first-child Structural Pseudo-Class
2.Dynamic Pseudo-Class Selectors
3.first-letter and :first-line Pseudo-Elements
4.Dynamic pseudo-classes
5.Structural pseudo-classes
6.:target pseudo-class
7.h1::before, h1::after content: "::";
8.Using the first-letter pseudo-element to create a "drop cap" letter
9.Link Pseudo-Class Example
10.:before and :after Pseudo-elements
11.Use Pseudo-Classes
12.First-letter Pseudo-element
13.Creating a drop cap using a CSS pseudo-element
14.First Line and Letter
15.p:first-line{font-weight:bold;}
16.first-letter {font-size:42px; width:200px;}
17.tr:first-child
18.Set style for a:link and a:visited
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.