Welcome to the Graphic and Web Design Forum


your forum for all things Design


  •  » Graphic Design
  •  » Web Design
  •  » Logos and Branding
  •  » Illustration
  •  » Photography
  •  » Design Tutorials
  •  » Plenty of Off Topic Chat

Register now to remove this ad box


YES! I want to register an account for free right now!


-->
Page 1 of 3 123 Last
  1. #1

    CSS multiple-class selectors


    REGISTER TO REMOVE ADS


    Hello, sorry for my 2nd help post of the day (my horoscope said it would be a bad day). I promise I tried a quick google search, but couldn't get my hands on a relevant page... probably because I'm not using the proper terminology or something.

    "multiple-class select"? "class chaining"?

    I don't know.... Anyway, I have a list (menu) kind of like this...

    Code:
    <ul id="nav">
      <li class="parent">
        <li>
        <li>
      <li class="parent active">
        <li>
        <li>
      <li class="parent">
        <li>
        ...
    </ul>
    I want a css selector that will target the li that is both parent and active...

    My first guess is:

    Code:
    li.parent.active {}
    But I have no idea whether this is the correct way to accomplish this, if there is a better way, or if there are browser issues with the method, or if this is completely unstandardized syntax that I should avoid.

    Some quick experimentation seemed to show that this selection method works on FF3.5, but IE6 only pays attention to the 2nd class. Hmm... it's hard to tell what's going on in IE6 sometimes, though.

    If anyone has some information on this topic or can point me toward some I would be greatly indebted.

  2. #2
    to target the list item that is defined by the class active just use .active
    Classes are exactly what they say on the tin. They encompasses classes of objects. So selecting just .active will only affect items in the .active class and nothing else. If you want to affect the items in the parent class then just use .parent

    get it?

  3. #3
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,428
    Well he's on about the more detailed side Arkady. Multiple classes and IE6's ignorance to them under certain circumstances.

  4. #4
    That's not the way I read it. He just sounded a little confused about how to reference them in CSS

  5. #5
    Harry's Avatar
    Join Date
    May 2007
    Location
    Leeds, England
    Posts
    11,428
    Aye, I was thinking that at first…

    However the reference to IE6 leads me to believe it's more to do with the weird and annoying IE6 bug which fiddles specificity.

  6. #6
    Scriptage's Avatar
    Join Date
    May 2008
    Location
    Yorkshire
    Posts
    2,789
    Edit the first class and create a second class:

    .parent, .parent_active{

    // Parent rules

    }

    .parent_active{

    // Active rules

    }


  7. #7

  8. #8
    Scriptage's Avatar
    Join Date
    May 2008
    Location
    Yorkshire
    Posts
    2,789

    REGISTER TO REMOVE ADS


    Not understanding the meerkat or the logic?

    HTML Code:
    ...
     
    <style type="text/css">
    .parent, .parent_active{
    
    // Parent rules
    // the parent and parent_active classes both follow these rules
    
    }
    
    .parent_active{
    
    // Extend the .parent class with new rules for the parent_active class
    
    }
    
    </style>
     
    ...
     
    <ul id="nav">
      <li class="parent">
        <li>
        <li>
      <li class="parent_active">
        <li>
        <li>
      <li class="parent">
        <li>
        ...
    </ul>
    Meercat.

Page 1 of 3 123 Last

Similar Threads

  1. Curious about pseudo selectors
    By lloydvincent in forum CSS Forum
    Replies: 10
    Last Post: 03-08-2009, 08:42 PM
  2. div class problems in nvu bug?
    By sophieuk in forum CSS Forum
    Replies: 2
    Last Post: 07-11-2008, 07:28 PM
  3. CSS Substring Selectors
    By Harry in forum Graphic Design Tutorials
    Replies: 0
    Last Post: 18-01-2008, 07:44 PM

Posting Permissions

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

Log in

Log in