Случайная задачка: группа только с кнопками

Совершенно случайно мне в голову пришла одна задачка. Звучит она так:

Можно ли в CSS выбрать элемент, внутри которого находятся только кнопки, и этих кнопок две и более?

Да, иногда приходят такие мысли 😅.

Где это может пригодиться? Ну, предположим, разрабатывается компонент табов, где должен быть элемент с ролью tablist, внутри которого могут быть только элементы с ролью tab и как минимум два таких.

Вернёмся к изначальной задаче с кнопками.
Ответ: так сделать можно. И вот как:

[role="group"]:has(> button:nth-child(2)):not(:has(> :not(button))) {
  width: fit-content;
  border: 2px solid green;
}

И разметка:

<div role="group">
  <button type="button">Action 1</button>
  <button type="button">Action 2</button>
  <button type="button">Action 3</button>
</div>

Абсолютно нечитаемое месиво из селекторов, но оно работает. Вся магия кроется в сочетании :has(), :not() и :nth-child(). Что там вообще происходит? Мы говорим:
1) выбери элемент с атрибутом role="group"
2) внутри которого вторым дочерним элементом является кнопка
3) и внутри которого нет дочерних элементов, которые не являются кнопкой

Иными словами: выбери группу, в которой есть как минимум две кнопки и нет ничего кроме кнопок.

Перекладывая эту идею на табы, можно получить такой селектор:

[role="tablist"]:has(> [role="tab"]:nth-child(2)):not(:has(> :not([role="tab"]))) {
  /* стили */
}