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.


  1. Ignacio Ricci
    Permalink to comment#

    Nice one.

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

  2. 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.

    • 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. Justin Ryan
    Permalink to comment#

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

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

    • Chris Coyier
      Permalink to comment#

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

    • Kelly A.
      Permalink to comment#

      Better to remove one, instead of add 12?

  4. 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. 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. 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. przecieki maturalne 2013
    Permalink to comment#

    Interesujący design tej strony. To przerobiony theophilus?

  8. 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. 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. 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!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.