Question

I have the usual unordered list for a navigation menu with submenus…

html:

<ul>
  <li><a href="#">Link 1</a></li>
  <li>
    <a href="#">Link with submenu</a>
    <ul>
      <li><a href="#">Sublink 1</a></li>
    </ul>
   </li>
</ul>

All of the links inside of the parent <li> have a border radius. But if the parent <li> has a child <ul>, I don’t want the link to have a radius.

I’m currently using this jQuery:

<script>
  $("li").has("ul").addClass("sub-radius");
</script>

It works fine except it’s targeting the <li>, but I need it to target the child <a> and remove its radius.

Any help would be appreciated.

Answer 1

Try this expression:

$("li:has(ul) > a").addClass("sub-radius");

Edit: If you don’t want the sub-items to have border-radii, remove the > in the query.