DevTools Tips

Jump from a label `for` attribute to the linked input (and more)

Categories: Supported by:

In Firefox, you can jump from an element that references the ID attribute of an other element, to that other element, by Cmd+clicking (or Ctrl+clicking) the attribute.

Here is a common example for when this is useful:

<label for="foo">Label</label>
...
<input id="foo">

In the above example, clicking the foo attribute value in the label element (while holding the Cmd or Ctrl key) will jump to the input element and select it. This can be very useful if the elements are far apart in the DOM tree.

Note that this also works for other kinds of "links" like:

  • <button form="formID">
  • <input list="datalistID">
  • <td headers="header1ID,header2ID">

Animation showing the Firefox DevTools Inspector panel, the mouse clicks the for attribute of a label element and the selection jumps to the related input element.

Thank you to Manuel Matuzović for sharing on twitter.