Use > to mark a direct relationship

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

html>body #navsite ul li a { 
 width: auto; 
}
</style>
</head>

<body>
  <div id="navsite">
   <p>Site navigation:</p>
   <ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li> 
    <li><a href="">Archives</a></li>
    <li><a href="">Writing</a></li>
    <li><a href="">Speaking</a></li>
    <li><a href="">Contact</a></li>
   </ul>
  </div>
</body>
</html>

Related examples in the same category

1.	Child Selector Demo
2.	Direct Child Selectors
3.	Apply styles to label elements, but only if they appear inside of an input form
4.	Set style for direct child

Use > to mark a direct relationship : Child Selector « Style Basics « HTML / CSS

Related examples in the same category