Как настроить таргетинг на отдельные детские классы CSS при наведении с помощью Tailwindcss
Как я могу сделать так, чтобы к прямым дочерним элементам родительского div класс CSS применялся к каждому из них индивидуально? Например, если я хочу, чтобы каждый элемент находился font-bold в состоянии наведения. Я надеюсь сделать это встроенным, используя атрибут class=, а не определять его в CSS-файле.
HTML:
<div class = "[&>a]:hover:font-bold">
<a>link 1</a>
<a>link 2</a>
</div>
Если я наведу курсор на любого из этих <a> детей, то все <a> станут жирными. Я хочу, чтобы каждый из них стал смелым, когда на него наводят курсор, не затрагивая своих братьев и сестер.
Живой пример: https://stackblitz.com/edit/stackblitz-starters-pjrw8j?file=index.html
Ответы 1
Согласно документации, иногда порядок вариантов имеет значение:
Порядок сложенных модификаторов
При наложении модификаторов они применяются изнутри наружу, как вызовы вложенных функций:
// These modifiers: 'dark:group-hover:focus:opacity-100' // ...are applied like this: dark(groupHover(focus('opacity-100')))По большей части это не имеет значения, но есть несколько ситуаций, когда используемый вами порядок фактически генерирует существенно другой CSS.
В вашей ситуации у вас есть [&>a]:hover:, что концептуально похоже на [&>a](hover(…)). Это будет означать:
hover:– наведите курсор на этот<div>элемент.[&>a]:— выберите прямые<a>дочерние элементы внутри этого<div>элемента.
Хотя на самом деле кажется, что вы хотите обратного, hover:[&>a]::
[&>a]:— выберите прямые<a>дочерние элементы внутри этого<div>элемента.hover:– наведите курсор на этот элемент (прямые дочерние<a>элементы внутри этого<div>элемента).
<script src = "https://cdn.tailwindcss.com/3.4.1"></script>
<div class = "hover:[&>a]:font-bold">
<a>link 1</a>
<a>link 2</a>
</div>