Select List Item Only If Doesn’t Contain Another List (and is top level)

I realize this is rather specific, but I had to write this selector earlier to fix a problem and I used jQuery because the selector is rather advanced (and needed to work cross-browser). I needed to select the anchor link of a list item but only if that list item didn't contain another list and was at the top level of the nested list structure (no deeper).

$("ul.dropdown > li:not(:has('ul')) a").css({
        "background-image": "none",
});

The idea was that each of the top level links in the dropdown menu had a "down arrow" graphic, but the list items that did not have a dropdown should have that arrow removed.

Comments

  1. User Avatar
    Ignacio Ricci
    Permalink to comment#

    Nice one.

    Why don’t you use .addClass instead. It’s nicer and more flexible.

  2. User Avatar
    Kelly A.
    Permalink to comment#

    @Ignacio .addClass is a nice way to hide things, like adding a .hiddenArrow class to each list item would hide the items.

    However, and you all can correct me if I’m wrong here, it’s more taxing to find all of them and add a class then it would be to just correct that particular instance in the css.

    Maybe these two are basically the same, either way?

    But .css, in my opinion, is way more flexible than .addClass, since you can write the css rule on the fly.

    • User Avatar
      Ignacio Ricci
      Permalink to comment#

      If later you need to remove a border, and not a background, or add a color, or whatever, you don’t need to edit the js by using addClass

  3. User Avatar
    Justin Ryan
    Permalink to comment#

    Was there a reason you didn’t use the reverse?

    ul.dropdown > li:has('ul') a = background-image

    • User Avatar
      Chris Coyier
      Permalink to comment#

      Not particularly, just felt more correct since only one of them (at the time) needed the image removed.

    • User Avatar
      Kelly A.
      Permalink to comment#

      Better to remove one, instead of add 12?

  4. User Avatar
    luke burford
    Permalink to comment#

    Still getting to grips with jQuery, and was only yesterday wondering if something like this would work for a dropdown menu on a new project.

    Cross browser too, lovely stuff :)

  5. User Avatar
    Bogdan Pop
    Permalink to comment#

    Wouldn’t have it been easier to add a css class to the link items that contain another list?

    We tend to use Javascript nowadays to fix pretty much everything, when we have options to fix them using the rightful language, which in this case is css.

  6. User Avatar
    Shoe
    Permalink to comment#

    I really do hope that you will be elaborating a little more on this issue.
    I like a tad more information.

  7. User Avatar
    przecieki maturalne 2013
    Permalink to comment#

    Interesujący design tej strony. To przerobiony theophilus?

  8. User Avatar
    best adult acne treatment
    Permalink to comment#

    If you would like to improve your experience simply keep visiting this web site and be updated with the newest news
    update posted here.

  9. User Avatar
    ASVAB Practice Test
    Permalink to comment#

    May I simply say what a relief to uncover an individual who actually knows what they’re discussing on the net. You certainly realize how to bring a problem to light and make it important. A lot more people need to read this and understand this side of the story. It’s surprising you are not more popular since you
    most certainly have the gift.

  10. User Avatar
    1 Comment
    Permalink to comment#

    Wow, incredible blog layout! How lengthy have you
    been running a blog for? you made blogging glance easy. The full look of your website is magnificent, let
    alone the content!

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag