Cursed CSS for selected one side of the table

cursed.css

  /**
    This fancy shenanigans is what allows users to only select 1 side of a diff.
    Inspired by this hack: https://stackoverflow.com/posts/73517303/revisions
  */
  tr td {
    user-select: none;
  }

  /** I'm not quite sure why its "n+4" instead of "n+3", when <td> 1-3 is the left, and <td> 4-6 is the right */

  /** Left half */
  table:not(:has(tr td:nth-child(n + 4):active)):has(tr td:nth-child(-n + 3):hover) tr td:nth-child(3) {
    user-select: auto;
  }
  table:has(tr td:nth-child(-n + 3):active) tr td:nth-child(3) {
    user-select: auto;
  }

  /** Right half */
  table:not(:has(tr td:nth-child(-n + 3):active)):has(tr td:nth-child(n + 4):hover) tr td:nth-child(6) {
    user-select: auto;
  }
  table:has(tr td:nth-child(n + 4):active) tr td:nth-child(6) {
    user-select: auto;
  }