Grow your CSS skills. Land your dream job.

Last updated on:

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. Nice one.

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

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

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

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

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

  4. 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. 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. 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. Interesujący design tej strony. To przerobiony theophilus?

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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".