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






  1. HTML / CSS
  2. Style Basics
  3. Pseudo Class

The first-child pseudo-class

  
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
body { font-family: sans-serif; } 
a { 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