Suportul pentru pseudo-clasa relațională CSS :has() în Tailwind permite stilizarea unui element părinte în funcție de descendenții săi. Astfel, putem crea formulare interactive, selecții radio stilizate și carduri active fără a fi nevoie de stări React/Vue sau cod JS pentru adăugarea de clase pe container.
Card radio stilizat complet doar prin CSS has-*
<!-- Întregul label părinte își schimbă fundalul și bordura când inputul radio este bifat: -->
<label class="flex items-center gap-3 p-4 border rounded-xl cursor-pointer transition
border-gray-200 hover:bg-gray-50
has-[:checked]:border-blue-600 has-[:checked]:bg-blue-50/50 has-[:checked]:ring-2 has-[:checked]:ring-blue-600">
<input type="radio" name="plan" value="pro" class="accent-blue-600 w-5 h-5" />
<div>
<span class="font-semibold block text-gray-900">Abonament Pro</span>
<span class="text-sm text-gray-500">Acces nelimitat la toate cursurile Dexblog.</span>
</div>
</label>
Întrebări & Exemple de Cod:
Modificatorul :has() în Tailwind CSS: Stilizarea Părinților pe Baza Stării Copiilor (has-*)Ai o nelămurire despre utilizarea comenzii
Modificatorul :has() în Tailwind CSS: Stilizarea Părinților pe Baza Stării Copiilor (has-*)sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.