Help me obtain CSS selectors for items with "class=children"
For my WordPress-based website (http://www.synergyintegration.com/wpcjtabs/home-again/ - which has been validated), I've created a few (top-level) pages i.e. Home, About, Solutions, Contact etc.... and beneath/within some of those top-level pages, I've created sub-pages, and some sub-pages even have sub-sub-pages - so there's 2 levels of navigation, beneath the top-most level.
What I'd like to achieve (but I might just have to give up on that wet dream) is to have the top-level tab/nav-items (i.e. Home, About, Solutions etc.) highlighted with a white BG both, when either the top-level item itself is selected, or when a sub/sub-sub-item is selected beneath the top-level item.
What I've decided to settle for is this:
- If a top-level tab/nav-item is selected i.e. "Home, About Us, Solutions etc." in my case, then I will highlight that tab/nav-item (using current_page_item) with a white BG.
- If a sub-item (or sub-sub-item) is selected then I'm okay with the top-level tab/nav-item being displayed with the blue BG, and the sub-item (or sub-sub-item) whatever the case may be, will be highlighted with a white BG.
The problem I'm having though is that when I select the top-level item "Home"....all the children (or sub/sub-sub items) under that, also get styled with a white BG...which is not what I want. I want all the children to be styled with the same blue BG as the other top-level items (which haven't been selected).
The help I need is to be able to obtain the correct CSS selector's to target the items with class="children". I cannot seem to figure out how to achieve that.
BTW, I'm currently at the infant-stage (as far as JS/jQuery/PHP goes) so I'd greatly appreciate as much hand-holding as possible