...

View Full Version : Descendent Selectors



john love
04-08-2011, 06:48 PM
The markup looks like this:



<section id="menubarParent">

<menu id="menubar">

<li>
<a href="#">text1</a>
// drop menu
<menu>
<li><a href="link11.html">text11</a></li>
<li>
// parent of sub-menu
<a class="daddy" href="#">text12</a>
// sub-menu
<menu>
<li class="here">text121</li>
<li>
// parent of sub-sub-menu
<a class="daddy" href="#">text122</a>
// sub-sub-menu
<menu>
<li class="here">text1221</li>
<li>
// parent of sub-sub-sub-menu
<a class="daddy" href="#">text1222</a>
<menu>
<li class="here">text12221</li>
</menu>
</li> // daddy text1222
</menu>
</li> // daddy text122
</menu>
</li> // // daddy text12
</menu>
</li> // main drop menu item text1

</menu> // menubar

</section> // menubarParent


My ignorance centers on wanting four different selectors that do different things and, therefore, do not bump into one another.

1) where ever I am currently, I want to have a dark background, hovering or not

2) darken main menu or any sub-menu item with hovering, no matter how deep the sub-menu

3) when I am hovering over only a sub-menu item (that's somewhere different than where I currently am - not "here") then I want the vertical bar to show at the left edge of the item

4) when I am hovering over only a sub-menu item (that's where I currently am = "here") then I want the vertical bar to show at the left edge of the item while maintaining the dark background from #1



/* (1) */
#menubar li.here {
background: #cc9966;
}

/* (2) */
#menubar li:hover {
background: #cc9966;
}

/* (3) */
#menubar menu li:hover {
background: url(../images/item_select.gif) left top no-repeat;
}

/* (4) */
#menubar menu li.here:hover, #menubar menu li.here.sfhover {
background: #cc9966 url(../images/item_select.gif) left top no-repeat;
}


THE problem is that rule #4 never gets seen .. so even if I am "here" when I hover, rule #3 takes over and never allows rule #4 to be seen. It's as if li:hover is considered identical to li.here:hover.

My ignorance is definitely not blissful.

Apostropartheid
04-08-2011, 11:54 PM
The markup looks like this:



<section id="menubarParent">

<menu id="menubar">

<li>
<a href="#">text1</a>
// drop menu
<menu>
<li><a href="link11.html">text11</a></li>
<li>
// parent of sub-menu
<a class="daddy" href="#">text12</a>
// sub-menu
<menu>
<li class="here">text121</li>
<li>
// parent of sub-sub-menu
<a class="daddy" href="#">text122</a>
// sub-sub-menu
<menu>
<li class="here">text1221</li>
<li>
// parent of sub-sub-sub-menu
<a class="daddy" href="#">text1222</a>
<menu>
<li class="here">text12221</li>
</menu>
</li> // daddy text1222
</menu>
</li> // daddy text122
</menu>
</li> // // daddy text12
</menu>
</li> // main drop menu item text1

</menu> // menubar

</section> // menubarParent


My ignorance centers on wanting four different selectors that do different things and, therefore, do not bump into one another.

1) where ever I am currently, I want to have a dark background, hovering or not

2) darken main menu or any sub-menu item with hovering, no matter how deep the sub-menu

3) when I am hovering over only a sub-menu item (that's somewhere different than where I currently am - not "here") then I want the vertical bar to show at the left edge of the item

4) when I am hovering over only a sub-menu item (that's where I currently am = "here") then I want the vertical bar to show at the left edge of the item while maintaining the dark background from #1



/* (1) */
#menubar li.here {
background: #cc9966;
}

/* (2) */
#menubar li:hover {
background: #cc9966;
}

/* (3) */
#menubar menu li:hover {
background: url(../images/item_select.gif) left top no-repeat;
}

/* (4) */
#menubar menu li.here:hover, #menubar menu li.here.sfhover {
background: #cc9966 url(../images/item_select.gif) left top no-repeat;
}


THE problem is that rule #4 never gets seen .. so even if I am "here" when I hover, rule #3 takes over and never allows rule #4 to be seen. It's as if li:hover is considered identical to li.here:hover.

My ignorance is definitely not blissful.

Try important!.

What browser are we looking at here?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum