Отключить выделение текста для вложенного диапазона (React / Electron)

Question

У меня есть несколько вложенных пролетов.

<span>
 <span>Title</span>
 <span>Author</span>
 <span>Year</span>
</span>

Когда пользователь пытается выбрать их, все будет выделено (с синим фоном за выделенным текстом). Однако я хочу, чтобы можно было выбрать только один диапазон, чтобы пользователь не ошибся и мог выбрать только, например, поле автора.

Я попытался сделать другие поля недоступными для выбора, выполнив это:

.unselectable {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */

  /* No support for these yet, use at own risk */
  -o-user-select: none;
  user-select: none;
}

а затем в моем HTML:

<span>
 <span class="unselectable">Title</span>
 <span>Author</span>
 <span class="unselectable">Year</span>
</span>

Но это не работает, я все еще могу выбрать все. Я использую React & Electron, если это должно иметь значение.