tags:

views:

55

answers:

2

I'm studying jQuery with this tutorial, but one of examples doesn't work.

<html>
  <head>
    <style type="text/css">
      a.test { font-weight: bold; background: #fc0 }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#ol > li").addClass("test");
        $("#some").addClass("test");
      });
    </script>
    </head>
   <body>
     <a href="http://jquery.com/" id="some">Some</a>
     <ul id="ol">
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>
  </body>
</html>

This example apply the "test" style to hyperlink (#some), but doesn't apply this style to the ordered list (#ol). Why?

+4  A: 

The JavaScript is OK, the CSS isn't. The CSS rule only applies to links.

To see the effect, change the CSS to:

.test { font-weight: bold; background: #fc0 }
Kobi
+5  A: 

remove the a from

a.test { font-weight: bold; background: #fc0 }

The a limits it to links (anchor tags).

Marius