Select one item : selector « Style Basics « HTML / CSS






  1. HTML / CSS
  2. Style Basics
  3. selector

Select one item

  

<!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">
#navsite p {
 display: none;
}
#navsite {
 font-family: Verdana, Helvetica, Arial, sans-serif;
 font-size: 0.7em;
 font-weight: bold;
 width: 12em; 
 border-right: 1px solid #666; 
 padding: 0; 
 margin-bottom: 1em; 
 background-color: #9cc; 
 color: #333; 
}
#navsite ul {
 list-style: none; 
 margin: 0; 
 padding: 0; 
}
#navsite ul li {
 margin: 0; 
 border-top: 1px solid #003;
}
#navsite ul li a {
 display: block; 
 padding: 2px 2px 2px 0.5em; 
 border-left: 10px solid #369; 
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #036; 
 color: #fff; 
 text-decoration: none; 
 width: 100%; 
}
html>body #navsite ul li a { 
 width: auto; 
}
#navsite ul li a:hover {
 border-left: 10px solid #036;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369; 
 background-color: #69f; 
 color: #fff; 
}

#pagespk a#linkspk {
 border-left: 10px solid #f33;
 border-right: 1px solid #f66;
 border-bottom: 1px solid #f33; 
 background-color: #fcc; 
 color: #333; 
}
</style>
</head>
<body id="pagespk">
  <div id="navsite">
    <h5>Site navigation:</h5>
    <ul>
     <li><a href="/" id="linkhom">Home</a></li>
     <li><a href="/about/" id="linkabt">About</a></li> 
     <li><a href="/archives/" id="linkarh">Archives</a></li>
     <li><a href="/writing/" id="linkwri">Writing</a></li>
     <li><a href="/speaking/" id="linkspk">Speaking</a></li> 
     <li><a href="/contact/" id="linkcnt">Contact</a></li>
    </ul>
  </div>
  
  
</body>
</html>








Related examples in the same category

1.Universal Selector
2.The Type Selector
3.The Class Selector
4.The ID Selector
5.The Child Selector
6.The Descendent Selector
7.The Adjacent Sibling Selector
8.Attribute Selectors
9.Using Attribute Selectors to select different textfields
10.Using Attribute Selectors to choose anchor by link type
11.Using Attribute Selectors to choose only mailto anchor type
12.Using Attribute Selectors to choose linked file type for anchor
13.Using Attribute Selectors to choose php links
14.Using Dynamic Pseudo-Classes to change color
15.Using Dynamic Pseudo-Classes to add text decoration
16.Dynamic Pseudo-Classes: hover effect
17.Selectors and Grouping
18.Class Selectors: A class represents something that you can have more than one of.
19.chain together class names within the class attribute.
20.An id is used but once per document.
21.Universal selectors are wildcard selectors.
22.Descendant Selectors
23.Next Sibling Selectors
24.Attribute Substring Selectors
25.Pseudo-Element Selectors
26.Dynamic Pseudo-Class Selectors
27.Using Different Selectors to Apply Styles
28.First Child Pseudo-Selector
29.Before and After Pseudo Selectors
30.Selector Basics
31.Style sheet for example demonstrating adjacent sibling and child selectors
32.paragraph with id selector
33.Direct Child Selectors
34.A specific selector wins, the last one wins
35.direct adjacent sibling combinator