[web] [SOVLED] CSS - Way to determine if primary child (top-level node)?

Started by
8 comments, last by deadimp 16 years, 10 months ago
Is there a way to detect if an element is a primary child of an element using pseudo-classing in CSS? By 'primary child', I don't mean 'first-child', or the first node, but rather the top-level node of an element, the 'immediate children'. I'm asking to see if there's a simple way to handle my drop-down menus, which is based off of the Suckerfish tutorial. What the CSS for sub-menus currently is:
#nav li ul {
 display: none;
 position: absolute; left: 200px; top: 0;
}	
#nav li:hover ul, #nav li.over ul {
 display: block;
}


What I'm shooting for:
[The solution]
#nav li > ul {
 display: none;
 position: absolute; left: 200px; top: 0;
}	
#nav li:hover > ul, #nav li.over > ul {
 display: block;
}
Does CSS already have this? Am I being blind, and does first-child do exactly this? EDIT: Skimmed over some of CSS stuff at W3Schools again, and nothing jumped out at me. EDIT: Source updated [Edited by - deadimp on June 1, 2007 11:25:01 AM]
Projects:> Thacmus - CMS (PHP 5, MySQL)Paused:> dgi> MegaMan X Crossfire
Advertisement
Take a look at CSS selectors (http://www.w3.org/TR/REC-CSS2/selector.html).

For your example:

#nav>li {...}

would select any li that is a direct child of #nav. That's different from first child. E.g:

<ol id="nav">  <li>one</li>  <li>two    <ol>      <li>three</li>      <li>four</li>    </ol>  </li>  <li>five</li></ol>


#nav>li would select 'one', 'two' and 'five'. #nav:first-child would only select 'one'.

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

Thanks! It works now.
I had been wondering what that arrow meant, just didn't see it in plain sight when I skimmed over the tutorials...
Projects:> Thacmus - CMS (PHP 5, MySQL)Paused:> dgi> MegaMan X Crossfire
Ah, crap.
IE doesn't support this. Gotta figure out a workaround.
Projects:> Thacmus - CMS (PHP 5, MySQL)Paused:> dgi> MegaMan X Crossfire
Quote:Original post by deadimp
Ah, crap.
IE doesn't support this. Gotta figure out a workaround.

There is, but it not exactly pretty. :)
You can repeat the tag to target the non-immediate children and override their style.

ul li{  color: #FF0000;}ul li li{  color: #000000;}

This will make the level 1 items red, but every item below that level will be colored black. But if you would need to, say, make every odd level blue and every even level red, you'd end up with something like this (and you'd need to know the maximum number of levels in advance [headshake]):

ul li{  color: #FF0000;}ul li li{  color: #0000FF;}ul li li li{  color: #FF0000;}ul li li li li{  color: #0000FF;}ul li li li li li{  color: #FF0000;}ul li li li li li li{  color: #0000FF;}etc...
If it's just for decoration (colors and all) and not structure/layout I would simply ignore IE. Why waste so much work just to make the colors a bit prettier? And even if it is structural you may get away with some graceful degredation in IE.

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

It's not for colors, just displaying the submenu.
Yeah, I'll just put a little conditional in the code, to where if it's IE it'll just use the identifiers same as before, otherwise use true CSS.

IE... Meh.

If I feel that that just looks too all-out crappy, I'll just use some *gasp* &#106avascript to ease my problems... I already have to do some to get the hover functionality to work.
Projects:> Thacmus - CMS (PHP 5, MySQL)Paused:> dgi> MegaMan X Crossfire
It is possible to get the suckerfish working in IE without &#106avascript. The trick with that is to use the anchor elements instead of the list items as blocks. IE supports :hover on anchor elements. It doesn't even look too messy in code.

<hr />
Sander Marechal<small>[Lone Wolves][Hearts for GNOME][E-mail][Forum FAQ]</small>

Alright, I'll try that out.
Projects:> Thacmus - CMS (PHP 5, MySQL)Paused:> dgi> MegaMan X Crossfire
Ran into a snag: I just figured out that I can't embed anchors inside an anchor - in the DOM Firefox will just place them next to each other - at least, that's what I'm seeing with Firebug.
I can place them in a series of div's, but then I would have to apply hover to the div, which doesn't normally work with CSS in IE...
Projects:> Thacmus - CMS (PHP 5, MySQL)Paused:> dgi> MegaMan X Crossfire

This topic is closed to new replies.

Advertisement