Выборка прямых дочерних элементов div в Tailwind CSS

Быстрый ответ

Для того чтобы в Tailwind CSS стилизовать прямых потомков, следует применить CSS-селектор > вместе с директивой @apply:

.parent > * {
  @apply bg-blue-500 p-4;
}

Таким способом к каждому непосредственному элементу с классом .parent будут применяться классы bg-blue-500 и p-4.

Начиная с версии Tailwind 3.1, можно использовать префикс >&, который дополнительно упрощает синтаксис:

<div class=">& bg-blue-500 ...">...</div>

Визуализация

Среди программистов распространен такой афоризм: настоящее садоводство невозможно без устранения всех багов. 🐛 Представим, что у нас есть сад с цветами (🌸), огороженный забором (👷‍♂️):

<div class="parent"> 👷‍♂️
  <div class="child">🌸</div>
  <div class="child">🌼</div>
  <div class="child">🌻</div>
</div>

Здесь цветы представляют собой прямых потомков и находятся под небезразличным взглядом садовника (div-родителя).

Садовник (👷‍♂️): Заботится только о своих растениях (🌸🌼🌻), игнорируя те, что выросли на соседнем участке (🌲🌾).

В Tailwind CSS мы стилизуем именно прямых потомков — растения, которые находятся под надзором нашего садовника:

.parent > .child { @apply bg-blue-500; } // Синие цветы во всей своей красе!

А в результате мы получаем сад, где уход оказывается выборочно, а все остальные растения остаются нетронутыми.

Изучаем возможности селекторов потомков в Tailwind

Tailwind CSS предлагает разнообразные способы воздействия на стили дочерних элементов. Вот как вы можете использовать эти инструменты:

Применение оператора >& и дочерних вариантов:

Оператор >& в Tailwind обеспечивает точные настройки стилей для дочерних элементов, абсолютно аналогичные CSS селектору div.section > div:

.parent > .child { @apply text-gray-200; } // Чётко выделены дочерние элементы

Для более точечного воздействия можно определить дочерние варианты в tailwind.config.js:

// В файле tailwind.config.js
module.exports = {
  variants: {
    extend: {
      textColor: ['child'],
    },
  },
}

После этого можно будет управлять стилями потомков прямо в HTML:

<div class="child:text-gray-200">...</div> // Так мы указываем стили исключительно для прямых потомков

Подробнее об этом расскажет наш спикер на видео

Создание собственных вариантов

Если стандартных вариантов недостаточно, то вы вправе создать свои стилевые правила с помощью AddVariant в Tailwind:

// В файле tailwind.config.js
const plugin = require('tailwindcss/plugin')

module.exports = {
  plugins: [
    plugin(function ({ addVariant }) {
      addVariant('child-hover', ({ container, separator }) => {
        container.walkRules(rule => {
          rule.selector = `.child-hover${separator}${rule.selector.slice(1)}:hover > *` 
        })
      })
    })
  ]
}

Теперь с помощью этого пользовательского варианта можно использовать child-hover:text-blue-500:

<div class="child-hover:text-blue-500">...</div> // Наведите курсор, чтобы добавить цвет!

Применение плагинов

Плагины расширяют возможности Tailwind. Например, tailwindcss-children значительно упрощает работу с дочерними элементами:

1. Установить плагин:

npm install tailwindcss-children --save-dev // Интегрируем функционал

2. Включить его в файле tailwind.config.js:

module.exports = {
  plugins: [
    require('tailwindcss-children'),
  ],
}

После чего этот плагин можно использовать в классах:

<div class="children:p-4"> ... </div> // Включаем плагин, когда потребуется порядок среди потомков

Применение базовых стилей

Используйте директивы @layer base и @apply, чтобы добавить стиль к прямым потомкам:

@layer base {
  .parent > * {
    @apply text-gray-200; // Базовые стили для дочерних элементов
  }
}

Такой код обеспечивает наследование класса text-gray-200 всеми прямыми наследниками .parent.

Полезные материалы

1. Handling Hover, Focus, and Other States – Tailwind CSS — официальное руководство Tailwind CSS, где рассмотрено управление вариантами состояний, среди которых и селекторы потомков.
2. Child and Sibling Selectors | CSS-Tricks — детальное объяснение селекторов дочерних элементов в CSS.
3. CSS selectors – CSS: Cascading Style Sheets | MDN — полное руководство от Mozilla Developer Network по CSS селекторам.
4. javascript – querySelector search immediate children – Stack Overflow — дискуссия на форуме разработчиков о целевом выборе прямых потомков с использованием querySelector.
5. Tailwind CSS Cheat Sheet — шпаргалка по классам Tailwind CSS для быстрого поиска нужных классов.
6. CSS Combinators — учебный курс от W3Schools, объясняющий применение CSS комбинаторов для выбора HTML-элементов.