CSS multiple-class selectors

[lloydvincent]

---

---

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...

<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:

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.

[Arkady]

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?

[Harry]

Well he's on about the more detailed side Arkady. Multiple classes and IE6's ignorance to them under certain circumstances.

[Arkady]

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

[Harry]

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.

[Scriptage]

Edit the first class and create a second class:

.parent, .parent_active{

// Parent rules

}

.parent_active{

// Active rules

}

[Arkady]

?

[Scriptage]

---

---

Not understanding the meerkat or the logic?

...
 
<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.