6. Selectors, continued

• Pseudo-class selectors

      li:first-child { font-weight: bold; }   /* first <li> of each list (not in IE6) */
  
      :link { color: green; }                 /* unvisited links */
      :visited { color: red; }                /* visited links */
  
      :hover { background-color: yellow; }    /* mouse over an element */
      :active { color: red; }                 /* click on an element */
      :focus { background-color: green; }     /* focus on an element (not in IE) */
      

• Pseudo-element selectors

      p:first-line { text-transform: uppercase }    /* upcase the first line of every <p> */
      p:first-letter { font-size: 300% }            /* enlarge first letter of every <p> */
      h1:before { content: "Chapter: " }            /* insert text before every <h1> (not in IE) */
      a:after { content: url("/images/link.png") }  /* insert image after every <a> (not in IE) */
      

• Selector can be a comma separated list:

      h1, h2 { text-decoration: underline; }   /* underline both <h1> and <h2> elements. */