Как установить зависимость элементов?

Question

[fuckingawesomenigga]

<div class="buttons">
	<button class="parent">...</button>
	<button class="parent">...</button>
	<button class="child">...</button>
	<button class="child">...</button>
	<button class="child">...</button>
	<button class="child">...</button>
	<button class="parent">...</button>
	<button class="child">...</button>
	<button class="child">...</button>
	<button class="child">...</button>
	<button class="parent">...</button>
</div>

Как при наведении на "parent" применить стиль ко всем элементам "child" которые ниже него, до следующего "parent"

Answer 1

[0xD34F]

const itemSelector = '.parent';
const className = 'xxx';

document.querySelectorAll(itemSelector).forEach(n => {
  n.addEventListener('mouseenter', onHover);
  n.addEventListener('mouseleave', onHover);
});

function onHover(e) {
  const state = e.type === 'mouseenter';
  for (
    let el = this;
    (el = el.nextElementSibling) && !el.matches(itemSelector);
    el.classList.toggle(className, state)
  ) ;
}

Если только через css - придётся дополнительно стилизовать элементы после следующего .parent, чтобы создать видимость, будто бы стили не применялись:

.parent:hover ~ .child {
  ...
}

.parent:hover ~ .parent ~ .child {
  ...
}

Answer 2

[Рома Зварич]

Указать такую логику в CSS нельзя.
Можно либо выбрать либо один следующий элемент на том же уровне, либо все последующие.

Возможно, решением может быть добавление еще одного уровня элементов, оборачивающих группу кнопок

<div class="buttons">
    <div class="row">
        <button class="parent">...</button>
    </div>
    <div class="row">
        <button class="parent">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
    </div>
    <div class="row">
        <button class="parent">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
        <button class="child">...</button>
    </div>
    <div class="row">
        <button class="parent">...</button>
    </div>
</div>

Answer 3

[Антон]

Установить каждой группе единый дата атрибут\идентификатор\класс