Sign in to follow this  

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

This topic is 3847 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

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]

Share this post


Link to post
Share on other sites
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'.

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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* javascript to ease my problems... I already have to do some to get the hover functionality to work.

Share this post


Link to post
Share on other sites
It is possible to get the suckerfish working in IE without javascript. 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.

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites

This topic is 3847 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this