Simulating Nested Links

It's common knowledge that you can't nest links in HTML. However, sometimes you may want or need to simulate the effect.

Say you have a dashboard page with a list of items that you can view (primary action), edit, or delete. You want the user to be able to view an item by clicking anywhere on the item's row. Naively, you might try to write the markup this way:

<div class="items">
  <a class="item" href="/items/1">
    Item 1
    <a href="/items/1/edit">Edit</a>
    <a href="/items/1/delete">Delete</a>
  </a>
  ...
</div>

But of course that won't work because you can't nest <a> tags. A common solution is to replace the outer <a> tag with a <div> and a Javascript click handler.

<div class="items">
  <div class="item" onclick="window.location.href = '/items/1';">
    Item 1
    <a href="/items/1/edit">Edit</a>
    <a href="/items/1/delete">Delete</a>
  </div>
  ...
</div>

But that muddies the semantics of the page, disallows opening links in other windows/tabs, and otherwise screws with accessibility.

My preferred solution is to:

  • Mark up the items with <div>s and all the links with plain old <a> tags.
  • Make the <div>s positioned via position: relative and give them new stacking contexts with z-index.
  • Give the primary link an absolutely positioned pseudoelement that fills the entire item <div>.
  • Put the secondary links above the primary one with z-index.

It looks something like this:

See the Pen Simulating Nested Links by Eric Freese (@ericfreese) on CodePen.