www.webdeveloper.com
Results 1 to 4 of 4

Thread: Cascade misunderstanding problem.

  1. #1
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,413

    Question Cascade misunderstanding problem.

    I guess I don't understand the 'cascade' in "Cascading Style Sheet" as well as I thought I did.

    Can someone explain why the font-size in the indented display of this list is larger that before or after?

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>LI menu</title>
    
    <style type="text/css">
     #divUL { width:300px; border:1px solid red; }
     #divUL ul {margin-left: 0; padding-left: 0;}
     #divUL li { font-size:1.4em;  list-style-type:none; padding-left:16px; }
     .ptr { cursor:pointer; }
    </style>
    
    </head>
    <body>
    <div id="divUL">
     <ul>
      <li class="mm" onclick="window.location.href='http://optometry.nova.edu'">NSU Optometry</li>
      <li class="mm" onclick="window.location.href='http://www.webdeveloper.com'">Webdeveloper</li>
      <li class="mm" onclick="window.location.href='http://www.codingforums.com'">CodingForums</li>
      <li>Jogos
       <ul>
        <li>Submenu A</li>
        <li class="mm" onclick="window.location.href='http://www.coderbyte.com'">Coderbyte</li>
        <li>Submenu C</li>
        <li class="mm" onclick="alert('Test display')">Test</li>
       </ul>
      </li>
      <li class="mm" onclick="window.location.href='http://www.dreamincode.net'">DreamInCode</li>
      <li class="mm" onclick="window.location.href='http://www.google.com'">Google</li>
      <li>Escritrio</li>
      <li>Outros</li>
      <li class="mm" onclick="window.location.href=http://www.nova.edu">NSU</li>
      <li class="ptr" onclick="alert('Test display')">Sistema</li>
     </ul>
    </div>
    
    <p> <div id="debug"></div>
    
    <script type="text/javascript">
    function $_(IDS) { return document.getElementById(IDS); }
    
    window.onload=function(){
      var txt;
      var elems = $_('divUL').getElementsByClassName("mm");
      for (var i=0; i<elems.length; i++) {
        elems[i].onmouseover = function() {
          $_('debug').innerHTML = this.innerHTML;
          this.style.backgroundColor = 'orange';
          this.style.cursor = 'pointer';
        }
        elems[i].onmouseout = function() {
          $_('debug').innerHTML = '';
          this.style.backgroundColor = '';
        }
      }
    }
    </script>
    
    </body>
    </html>

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,413
    Well, after further experimentation, I added this...
    Code:
     #divUL li ul li { font-size:1em; }
    It seems to have fixed my immediate problem, but I'm not sure I understand why!

    Is there a better way to define the CSS parts?

  3. #3
    Join Date
    Mar 2011
    Posts
    1,148
    I was in the same muddle a while ago when a page wasn't behaving as I expected/hoped, and found the answer to be a bit of a surprise.

    The 'cascade' doesn't necessarily follow the order in which the rules are encountered. The complexity/specificity of the selector takes precedence. There are (doubtlessly) details I'm glossing over, but that's what I came away with. I didn't take note of any references, but I think I just searched on "CSS cascade precedence". That should lead you to the real definition.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,413
    Quote Originally Posted by rtrethewey View Post
    I was in the same muddle a while ago when a page wasn't behaving as I expected/hoped, and found the answer to be a bit of a surprise.

    The 'cascade' doesn't necessarily follow the order in which the rules are encountered. The complexity/specificity of the selector takes precedence. There are (doubtlessly) details I'm glossing over, but that's what I came away with. I didn't take note of any references, but I think I just searched on "CSS cascade precedence". That should lead you to the real definition.
    Thanks for the lead. I'll search further with those keywords.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles