Использование :has в Tailwind с соседними одноуровневыми селекторами
У меня есть следующее CSS, которое работает по назначению.
[data-type='transfer']:has(+ [data-type^='sale_']) {
opacity: 0.25;
}
Он просматривает атрибуты данных и скрывает элементы со знаком data-type = "transfer, если они соседствуют с элементами, содержащими атрибуты данных, начинающиеся с «sale_». Для ясности я уменьшил непрозрачность вместо того, чтобы скрывать элемент, чтобы было как можно понятнее, что я делаю.
Вот это в быстрой демонстрации:
[data-type='transfer']:has(+ [data-type^='sale_']) {
opacity: 0.25;
}<ul>
<li data-type = "transfer">a transfer</li>
<li data-type = "sale_buyer">a buyer sale</li>
<li data-type = "transfer">a transfer</li>
<li data-type = "sale_seller">a seller sale</li>
</ul>Как мне преобразовать рабочий CSS, приведенный выше, в код Tailwind теперь, когда :has поддерживается? Я пробовал что-то вроде этого, но это не работает:
<li className='has-[[data-type = "transfer"] + [data-type^ = "sale_"]]:hidden'>...</li>
Ответы 2
Если вы умеете работать в обратном порядке, то аналог Tailwind- лучше подойдет для этого. (Я даже не знал, что :has можно использовать для нацеливания на братьев и сестер; [data-type='transfer'] + [data-type^='sale_'] будет эквивалентным селектором CSS.)
Соответствующая строка класса:
opacity-25 peer peer-[[data-type=transfer]]:data-[type^=sale\_]:opacity-100
(Почему sale\_, а не sale_? В Tailwind символы подчеркивания представляют собой пробелы, и обычно их необходимо экранировать, хотя в данном случае его опускание не меняет вывод по какой-либо причине.)
Сгенерированный CSS:
.opacity-25{
opacity: 0.25
}
.peer[data-type=transfer] ~ .peer-\[\[data-type\=transfer\]\]\:data-\[type\^\=sale\\_\]\:opacity-100[data-type^=sale_]{
opacity: 1
}
Редактировать 1: не учтен обратный характер моего обратного ответа.
Редактировать 2: ~ менее строго, чем +, так что это не идеальный ответ. Оставив потомкам.
В итоге я спросил создателя Tailwind, как это сделать, и вот ответ, который он мне дал. Мне не хватило первого + внутри начальной левой скобки, и это лучший ответ.
<ul>
<li class = "has-[+[data-type^='sale\_']]:data-[type='transfer']:opacity-25" data-type = "transfer">a transfer</li>
<li class = "has-[+[data-type^='sale\_']]:data-[type='transfer']:opacity-25" data-type = "sale_buyer">a buyer sale</li>
<li class = "has-[+[data-type^='sale\_']]:data-[type='transfer']:opacity-25" data-type = "transfer">a transfer</li>
<li class = "has-[+[data-type^='sale\_']]:data-[type='transfer']:opacity-25" data-type = "sale_seller">a seller sale</li>
</ul>