在班级为

Question

我正在尝试确定焦点元素是否是具有 inside 类的孩子，并向该孩子添加类。但我不知道如何实现它。如何将孩子与具有特定班级的父母联系起来？

这是我尝试过的：

if (event.keyCode === 9) {
   if (target.closest(".parent")) {
      const child = target.querySelector(".child");
      child.classList.add("new-class");
   }
}

HTML

<div class="parent">
<input type="checkbox" /> // hidden input
   <label class="child"> // if this element is tabbed, do stuff
      <span>Icon</span>
   </label>
   <a href="#" class="link">link</a>
</div>

这是我想要实现的：

如果选项卡式（焦点）元素的类为.child，并且是.parent的子级，则向该子级添加一个类。

Answer 1

我认为您可能想尝试使用focus-within CSS选择器来为您的孩子设置样式：

.parent:focus-within .child {
  // style of child here
}

如此处所述：https://css-tricks.com/a-css-approach-to-trap-focus-inside-of-an-element/