Direct Hierarchical CSS

I finally have a need for this.

[cmarshall]

I've always avoided "gettin' fancy" with CSS, so I've not done this before. This also illustrates exactly why I've always avoided fanciness.

I need to affect only one layer of a nested CSS hierarchy.

To wit:

<div class="level_1">
<div class="level_2">
<div class="level_3">
</div>
</div>
</div>

I want to change display in level_2, but not level_1 or level_3.

In FF, the CSS I use is thus:

div.level_1>div.level_2 { blah...blah }

However, this no workee in IE6.

All the stuff I see keeps telling me it don't work in IE. I haven't seen a decent demonstration of getting this type of thing to work in IE.

I'm sure I just need to RTFM, and would certainly appreciate which M I should R.

[penders]

- You could override the appropriate level_2 properties in the level_3 class?

- Perhaps have a 'sub' container within your level_2 container and apply your 'none inherited' styles to that:

<div class="level_1"> 
 <div class="level_2"> 
  <div class="level_2_1"></div> 
  <div class="level_3"> 
  </div> 
 </div> 
</div>

- May be if level_3 shouldn't inherit from level_2 it shouldn't be contained in level_2? Just a thought.

[cmarshall]

Darn. If you're suggesting that, then I guess there isn't a straightforward way to do it.

The problem is that it's a

<ul>

being generated by WordPress, so I don't have much control over the code itself. I already do a bit of hackery, and use ob_ stuff to capture the lists and tweak the outer edges a bit. I can't really get into them that easily. I guess I'll have to override the function and play with it myself.

It's the navigation stuff on the side. If you are on a page that has a link in the navbar, I take away that link's "linkishness." I make it look like regular text and display a pointer. Clicking on it still resolves the link (which is the existing page, so there's no visible change, except maybe the page scrolls to the top). However, these lists are hierarchical, and I don't want all the contained links to also lose their "linkishness."

[Old_Honky]

surely the answer is to use the cascade. At the bottom of your style sheet put in all the changes under level 2, i.e.

.level_2 p{blah blah}
.level_2 a{blah blah}
etc.

Then below that correct all the styles back to the same as level one, i.e.

.level_3 p{blah blah} etc. etc.

[cmarshall]

That would work, except that WP doesn't actually bestow classes on other levels. A more accurate example of the type of code it gives would be thus (Penders, how the heck do you display indents in your code?)

<ol>
 <li>Level 1<ol>
  <li class="selected_page">Level 2<ol>
   <li>Level 3</li>
  </ol></li>
 </ol></li>
</ol>

I think I'm gonna have to actually override the display function and mess with the classes myself.

[penders]

You could still perhaps override the styles (using the cascade) without classes...

Level 1...

ol li { }

Level 2...

ol li ol li { }

Level 2 selected...

ol li ol li.selected_page { }

level 3...

ol li ol li ol li {}

Although this does start to look a bit cumbersome. Although does

.selected_page

need to be tied to a particular level? It is for this reason I would tend to apply the

.selected_page

class to the contained anchor rather than the LI container, but hey.

You could also consider managing this with JavaScript. (I assume this can be done with WordPress?) Perhaps search for the

.selected_page

class on the LI and add an additional class to the child anchor, or even remove the anchor entirely to leave just plain text?

(Penders, how the heck do you display indents in your code?)

This had bugged me for ages too, until I found this thread:
posting code samples with indent [webmasterworld.com]

[cmarshall]

FWIW, I was able to kludge up a workaround by creative use of CSS, and exercising Mad Sith Specificity skillz [stuffandnonsense.co.uk]. It feels "kludgy," but it works.

[g1smd]

Err. Nobody ever seems to use this contruct ...

level1 level2 level3 level4 { ... style here ... };

What does it do for you?

.

I have just used it with ...

.content ul li a { ... style ... };

which only styles the links that are (top level) inside lists in the content area.

It doesn't touch links in the content area if they are outside of that list. It doesn't touch links that are in a list, but are in another area.

If there were another lower level of nesting within the list, it wouldn't touch those either.

[cmarshall]

That's what I did, however, I also had to play around with the order of things.

[Marc Sabatella]

Regarding the idea of using

.content ul li a { ... }

This is pretty much specifically what I was trying to do in this thread:

[webmasterworld.com...]

But the problem is, this construct does *not* limit itself to top level list items. If you have a nested list - properly contained within a <li> ... </li> (which I wasn't doing at first) - then this rule is going to apply to all links in sub-lists, too. In my case, I was actually specifying a particular li item with li.current, so I could use ".content ul li.current > a" to get just the direct children of li.current. If I wanted all top level list items, I would need ".content > ul > li > a"

I don't have IE6 installed anwhere convenient - is ">" not supported at all, or is there something paricualr about the example the OP is using that doens't work [ie, am I likely to have problems too?]

[cmarshall]

is ">" not supported at all, or is there something paricualr about the example the OP is using that doens't work [ie, am I likely to have problems too?]

It appears as if The direct Descendant Specifier (.parent>.child) is not supported by at least IE6, which is a showstopper for me.

What I did was use specificity to cause the named class to override the general class.

If you desire, I can show you a SourceForge project that demonstrates what I did, but it isn't all nice and distilled, like you get here.

[Xapti]

if you have the power to include javascript to the page, you can use that child selector you mentioned at the start. IE will emulate the effect with javascript if you use a javascript fix.

[cmarshall]

Thanks. You are correct. The rub, however, is that I need the site to display well with no JS and no cookies. Graceful degradation is critical.

The method I use works, and is what most consider to be the "proper" way to do things in CSS.