/    Sign up×
Community /Pin to ProfileBookmark

WordPress Site: Help me obtain CSS selectors for items with "class=children"

Copy linkTweet thisAlerts:
Aug 03.2011

Hi All,

For my WordPress-based website ([URL=”http://www.synergyintegration.com/wpcjtabs/home-again/”]http://www.synergyintegration.com/wpcjtabs/home-again/[/URL] – 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.

    The image at this link [URL=”http://synergyintegration.com/images/CSS-Children-Targetting.png”]http://synergyintegration.com/images/CSS-Children-Targetting.png[/URL] shows the 2 sub-items with a white BG (circled in red). The image also includes the firebug code…which I guess would be helpful in figuring out the CSS selectors.

    Thanks.

    Gerard

    to post a comment
    CSS

    4 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @Cory_RAug 03.2011 — This requires JavaScript.
    Copy linkTweet thisAlerts:
    @wdnewbieauthorAug 04.2011 — ...and by any chance would you have the necessary script handy, to pass on to me?

    Thanks,

    Gerard
    Copy linkTweet thisAlerts:
    @Cory_RAug 04.2011 — Not really, I've done something like this on one of the themes I created but I couldn't get the jQuery to work on your site. You'd be best off posting this request in the JavaScript section.

    $('#top_menu > li').hover(function () { $('> a', this).addClass('drophover'); }, function () { $('> a', this).removeClass('drophover'); });There's the jQuery I used if you want to mess around with it.
    Copy linkTweet thisAlerts:
    @wdnewbieauthorAug 04.2011 — and as suggested, I guess I'll just post this in the JS forum...and see if I have any luck there.

    My JS/jQuery skills too are at the infant stages (at this time)...so I'll probably need a bit more code than you provided below.

    Thanks anyways ?

    Gerard
    ×

    Success!

    Help @wdnewbie spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.7,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...