Skip to content

Instantly share code, notes, and snippets.

@Kcko

Kcko/demo.html

Last active October 3, 2025 20:08
Show Gist options
  • Save Kcko/1b2eae576a718ceb80c92c16306c62fc to your computer and use it in GitHub Desktop.
Save Kcko/1b2eae576a718ceb80c92c16306c62fc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
demo.html
https://play.tailwindcss.com/jkUSFtwsv3
Raw
index.html
<!doctype html>
<html lang="cs">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind Selektory - Kompletní průvodce</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50 p-8">
<h1 class="mb-8 text-3xl font-bold">Tailwind CSS - Kompletní průvodce selektory</h1>
<!-- ============================================ -->
<!-- ČÁST 1: STYLOVÁNÍ SAMOTNÉHO ELEMENTU -->
<!-- ============================================ -->
<section class="mb-16 rounded-lg border-2 border-blue-200 bg-white p-6">
<h2 class="mb-6 text-2xl font-bold text-blue-700">ČÁST 1: Stylování samotného elementu</h2>
<!-- #1 Data atribut bez hodnoty -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#1 Data atribut BEZ hodnoty na elementu</h3>
<div class="mb-2 rounded bg-gray-50 p-4"><code class="text-sm">data-[active]:class</code> nebo <code class="text-sm">data-active:class</code></div>
<div data-active class="border-2 border-gray-300 p-4 data-[active]:border-purple-500 data-[active]:bg-purple-50">✅ Mám data-active → fialový</div>
<div class="mt-2 border-2 border-gray-300 p-4 data-[active]:border-purple-500 data-[active]:bg-purple-50">❌ Nemám data-active → šedý</div>
</div>
<!-- #2 Data atribut S hodnotou -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#2 Data atribut S konkrétní hodnotou na elementu</h3>
<div class="mb-2 rounded bg-gray-50 p-4"><code class="text-sm">data-[state=open]:class</code> - kontroluje přesnou hodnotu</div>
<div data-state="open" class="border-2 border-gray-300 p-4 data-[state=open]:border-green-500 data-[state=open]:bg-green-50">✅ data-state="open" → zelený</div>
<div data-state="closed" class="mt-2 border-2 border-gray-300 p-4 data-[state=open]:border-green-500 data-[state=open]:bg-green-50">❌ data-state="closed" → šedý</div>
</div>
<!-- #3 Data atribut - jen přítomnost -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#3 Data atribut - kontrola jen PŘÍTOMNOSTI (ignoruje hodnotu)</h3>
<div class="mb-2 rounded bg-gray-50 p-4"><code class="text-sm">data-state:class</code> - stačí, že atribut existuje</div>
<div data-state="open" class="border-2 border-gray-300 p-4 data-state:border-orange-500 data-state:bg-orange-50">✅ data-state="open" → oranžový</div>
<div data-state="closed" class="mt-2 border-2 border-gray-300 p-4 data-state:border-orange-500 data-state:bg-orange-50">✅ data-state="closed" → také oranžový (hodnota se ignoruje)</div>
<div class="mt-2 border-2 border-gray-300 p-4 data-state:border-orange-500 data-state:bg-orange-50">❌ bez data-state → šedý</div>
</div>
<!-- #4 CSS třída -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#4 CSS třída na elementu</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[&.active]:class</code>
</div>
<div class="active border-2 border-gray-300 p-4 [&.active]:border-blue-500 [&.active]:bg-blue-50">✅ Mám třídu .active → modrý</div>
<div class="mt-2 border-2 border-gray-300 p-4 [&.active]:border-blue-500 [&.active]:bg-blue-50">❌ Nemám třídu .active → šedý</div>
</div>
</section>
<!-- ============================================ -->
<!-- ČÁST 2: STYLOVÁNÍ PODLE RODIČE (GROUP) -->
<!-- ============================================ -->
<section class="mb-16 rounded-lg border-2 border-green-200 bg-white p-6">
<h2 class="mb-6 text-2xl font-bold text-green-700">ČÁST 2: Stylování podle rodiče s GROUP (čistší syntaxe)</h2>
<p class="mb-6 text-gray-600">Rodič musí mít třídu <code class="rounded bg-gray-100 px-2 py-1">group</code></p>
<!-- #5 Group + data atribut bez hodnoty -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#5 Group + data atribut BEZ hodnoty</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">group-data-[active]:class</code>
</div>
<div data-active class="group border-2 border-gray-300 bg-gray-100 p-4">
<p class="group-data-[active]:font-bold group-data-[active]:text-purple-600">✅ Rodič (group) má data-active → fialový text</p>
</div>
<div class="group mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<p class="group-data-[active]:font-bold group-data-[active]:text-purple-600">❌ Rodič nemá data-active → normální</p>
</div>
</div>
<!-- #6 Group + data atribut s hodnotou -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#6 Group + data atribut S hodnotou</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">group-data-[state=danger]:class</code>
</div>
<div data-state="danger" class="group border-2 border-gray-300 bg-gray-100 p-4">
<p class="group-data-[state=danger]:font-bold group-data-[state=danger]:text-red-600">✅ Rodič má data-state="danger" → červený</p>
</div>
<div data-state="success" class="group mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<p class="group-data-[state=danger]:font-bold group-data-[state=danger]:text-red-600">❌ Rodič má data-state="success" → normální</p>
</div>
</div>
<!-- #7 Group + CSS třída -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#7 Group + CSS třída</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">group-[.card--danger]:class</code>
</div>
<div class="group card--danger border-2 border-gray-300 bg-orange-600 p-4">
<a href="#" class="text-black group-[.card--danger]:font-bold group-[.card--danger]:text-white"> ✅ Rodič má .card--danger → bílý text </a>
</div>
<div class="group mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<a href="#" class="text-black group-[.card--danger]:font-bold group-[.card--danger]:text-white"> ❌ Rodič nemá .card--danger → černý text </a>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- ČÁST 3: STYLOVÁNÍ PODLE PŘEDKA (ARBITRARY) -->
<!-- ============================================ -->
<section class="mb-16 rounded-lg border-2 border-purple-200 bg-white p-6">
<h2 class="mb-6 text-2xl font-bold text-purple-700">ČÁST 3: Stylování podle předka bez GROUP (flexibilnější)</h2>
<p class="mb-6 text-gray-600">Rodič/předek <strong>nemusí</strong> mít třídu <code class="rounded bg-gray-100 px-2 py-1">group</code></p>
<!-- #8 Arbitrary + data atribut bez hodnoty -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#8 Arbitrary selektor + data atribut BEZ hodnoty</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[[data-expanded]_&]:class</code>
</div>
<div data-expanded class="border-2 border-gray-300 bg-gray-100 p-4">
<p class="[[data-expanded]_&]:font-bold [[data-expanded]_&]:text-purple-600">✅ Předek má data-expanded → fialový</p>
</div>
<div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<p class="[[data-expanded]_&]:font-bold [[data-expanded]_&]:text-purple-600">❌ Předek nemá data-expanded → normální</p>
</div>
</div>
<!-- #9 Arbitrary + data atribut s hodnotou -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#9 Arbitrary selektor + data atribut S hodnotou</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[[data-theme='dark']_&]:class</code>
</div>
<div data-theme="dark" class="border-2 border-gray-300 bg-gray-800 p-4">
<p class="text-gray-400 [[data-theme='dark']_&]:font-bold [[data-theme='dark']_&]:text-orange-400">✅ Předek má data-theme="dark" → oranžový</p>
</div>
<div data-theme="light" class="mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<p class="text-gray-400 [[data-theme='dark']_&]:font-bold [[data-theme='dark']_&]:text-orange-400">❌ Předek má data-theme="light" → šedý</p>
</div>
</div>
<!-- #10 Arbitrary + CSS třída -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#10 Arbitrary selektor + CSS třída</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[.is-open_&]:class</code>
</div>
<div class="is-open border-2 border-gray-300 bg-gray-100 p-4">
<p class="[.is-open_&]:font-bold [.is-open_&]:text-blue-600">✅ Předek má .is-open → modrý</p>
</div>
<div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4">
<p class="[.is-open_&]:font-bold [.is-open_&]:text-blue-600">❌ Předek nemá .is-open → normální</p>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- ČÁST 4: STYLOVÁNÍ POTOMKA PODLE RODIČE -->
<!-- ============================================ -->
<section class="mb-16 rounded-lg border-2 border-orange-200 bg-white p-6">
<h2 class="mb-6 text-2xl font-bold text-orange-700">ČÁST 4: Stylování POTOMKA podle stavu RODIČE</h2>
<p class="mb-6 text-gray-600">Rodič má atribut/třídu a stylujeme jeho potomka (dítě, vnuka...)</p>
<!-- #11 Potomek podle data atributu rodiče -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#11 Stylování SVG podle data atributu rodiče</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[&[data-collapsed=true]_svg]:rotate-180</code>
<p class="mt-1 text-xs text-gray-600">Čteš to: "Když <strong>tento element</strong> má data-collapsed=true, otoč jeho <strong>svg potomka</strong>"</p>
</div>
<div data-collapsed="true" class="border-2 border-gray-300 bg-gray-100 p-4 [&[data-collapsed=true]_svg]:rotate-180 [&[data-collapsed=true]_svg]:text-red-500">
<svg class="h-6 w-6 transition-transform" fill="currentColor" viewBox="0 0 20 20">
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
</svg>
<span class="ml-2">✅ Rodič má data-collapsed="true" → SVG je otočené a červené</span>
</div>
<div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4 [&[data-collapsed=true]_svg]:rotate-180 [&[data-collapsed=true]_svg]:text-red-500">
<svg class="h-6 w-6 transition-transform" fill="currentColor" viewBox="0 0 20 20">
<path d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" />
</svg>
<span class="ml-2">❌ Rodič nemá data-collapsed → SVG normální</span>
</div>
</div>
<!-- #12 Potomek podle CSS třídy rodiče -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#12 Stylování potomka podle CSS třídy rodiče</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[&.card--premium_span]:text-yellow-500</code>
<p class="mt-1 text-xs text-gray-600">Čteš to: "Když <strong>tento element</strong> má třídu .card--premium, nastyl jeho <strong>span potomka</strong>"</p>
</div>
<div class="card--premium border-2 border-gray-300 bg-gradient-to-r from-yellow-50 to-orange-50 p-4 [&.card--premium_span]:font-bold [&.card--premium_span]:text-yellow-600">
<span>⭐</span>
<span class="ml-2">✅ Rodič má .card--premium → span je žlutý a tučný</span>
</div>
<div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4 [&.card--premium_span]:font-bold [&.card--premium_span]:text-yellow-600">
<span>⭐</span>
<span class="ml-2">❌ Rodič nemá .card--premium → span normální</span>
</div>
</div>
<!-- #13 Složitější příklad - více úrovní -->
<div class="mb-8">
<h3 class="mb-3 text-lg font-semibold">#13 Komplexnější příklad - vnořené elementy</h3>
<div class="mb-2 rounded bg-gray-50 p-4">
<code class="text-sm">[&[data-state=error]_.icon]:text-red-500</code>
<p class="mt-1 text-xs text-gray-600">Styluje <strong>jakéhokoliv potomka</strong> s třídou .icon</p>
</div>
<div data-state="error" class="border-2 border-red-300 bg-red-50 p-4 [&[data-state=error]_.icon]:scale-125 [&[data-state=error]_.icon]:text-red-600">
<div class="flex items-center gap-2">
<span class="icon transition-transform">⚠️</span>
<span>✅ Rodič má data-state="error" → ikona je větší a červená</span>
</div>
<div class="mt-2 ml-8">
<span class="icon transition-transform">❌</span>
<span class="ml-2">Vnořená ikona je také stylovaná</span>
</div>
</div>
<div class="mt-2 border-2 border-gray-300 bg-gray-100 p-4 [&[data-state=error]_.icon]:scale-125 [&[data-state=error]_.icon]:text-red-600">
<div class="flex items-center gap-2">
<span class="icon transition-transform">⚠️</span>
<span>❌ Rodič nemá data-state="error" → ikona normální</span>
</div>
</div>
</div>
<div class="rounded border-l-4 border-orange-400 bg-orange-50 p-4">
<p class="mb-2 font-semibold text-orange-800">🔑 Klíčový rozdíl:</p>
<div class="space-y-2 text-sm">
<div>
<code class="rounded bg-white px-2 py-1">[[data-collapsed=true]_&]:class</code>
<p class="ml-4 text-gray-700">→ Styluje <strong>tento element</strong>, když <strong>předek</strong> má atribut</p>
</div>
<div>
<code class="rounded bg-white px-2 py-1">[&[data-collapsed=true]_svg]:class</code>
<p class="ml-4 text-gray-700">→ Styluje <strong>potomka</strong>, když <strong>tento element</strong> má atribut</p>
</div>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- KDY CO POUŽÍT -->
<!-- ============================================ -->
<section class="mb-8 rounded-lg border-2 border-blue-300 bg-gradient-to-r from-blue-50 to-purple-50 p-6">
<h2 class="mb-6 text-2xl font-bold">🎯 Kdy co použít?</h2>
<div class="space-y-4">
<div class="rounded-lg bg-white p-4">
<h3 class="mb-2 font-bold text-green-700">✅ Použij GROUP syntaxe když:</h3>
<ul class="ml-6 list-disc space-y-1 text-gray-700">
<li>Máš jasný rodič-dítě vztah v komponentě</li>
<li>Chceš čitelnější a kratší kód</li>
<li>Používáš to opakovaně v jedné komponentě</li>
</ul>
<div class="mt-3 rounded bg-green-50 p-3 text-sm">
<code>group-data-[active]:text-purple-500</code>
</div>
</div>
<div class="rounded-lg bg-white p-4">
<h3 class="mb-2 font-bold text-purple-700">✅ Použij ARBITRARY selektory když:</h3>
<ul class="ml-6 list-disc space-y-1 text-gray-700">
<li>Nechceš přidávat třídu <code class="rounded bg-gray-100 px-1">group</code> na rodiče</li>
<li>Předek je vzdálenější (ne přímý rodič)</li>
<li>Potřebuješ flexibilnější podmínky</li>
</ul>
<div class="mt-3 rounded bg-purple-50 p-3 text-sm">
<code>[[data-theme='dark']_&]:text-white</code>
</div>
</div>
<div class="rounded-lg bg-white p-4">
<h3 class="mb-2 font-bold text-orange-700">✅ Stylování potomka podle rodiče:</h3>
<ul class="ml-6 list-disc space-y-1 text-gray-700">
<li>Když chceš stylovat dítě/vnuka podle stavu rodiče</li>
<li>Rodič má atribut/třídu a potomek se podle toho mění</li>
<li>Užitečné pro ikony, SVG, nested elementy</li>
</ul>
<div class="mt-3 rounded bg-orange-50 p-3 text-sm">
<code>[&[data-collapsed=true]_svg]:rotate-180</code>
</div>
</div>
<div class="rounded-lg bg-white p-4">
<h3 class="mb-2 font-bold text-blue-700">✅ Přímé selektory na elementu:</h3>
<ul class="ml-6 list-disc space-y-1 text-gray-700">
<li>Když stylování závisí jen na vlastním stavu elementu</li>
<li>Nejjednodušší a nejrychlejší varianta</li>
</ul>
<div class="mt-3 rounded bg-blue-50 p-3 text-sm">
<code>data-[active]:bg-blue-500</code>
</div>
</div>
</div>
</section>
<!-- ============================================ -->
<!-- RYCHLÁ REFERENČNÍ TABULKA -->
<!-- ============================================ -->
<section class="rounded-lg border-2 border-gray-300 bg-white p-6">
<h2 class="mb-6 text-2xl font-bold">📋 Rychlá referenční tabulka</h2>
<div class="overflow-x-auto">
<table class="w-full border-collapse text-sm">
<thead>
<tr class="bg-gray-100">
<th class="border p-3 text-left">Situace</th>
<th class="border p-3 text-left">Syntaxe</th>
<th class="border p-3 text-left">Příklad</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border p-3 font-semibold" colspan="3">NA ELEMENTU:</td>
</tr>
<tr>
<td class="border p-3">Data atribut bez hodnoty</td>
<td class="border p-3"><code>data-[active]:class</code></td>
<td class="border p-3"><code>data-[active]:bg-blue-500</code></td>
</tr>
<tr>
<td class="border p-3">Data atribut s hodnotou</td>
<td class="border p-3"><code>data-[state=open]:class</code></td>
<td class="border p-3"><code>data-[state=open]:text-green-500</code></td>
</tr>
<tr>
<td class="border p-3">Data atribut - jen přítomnost</td>
<td class="border p-3"><code>data-state:class</code></td>
<td class="border p-3"><code>data-state:border-orange-500</code></td>
</tr>
<tr>
<td class="border p-3">CSS třída</td>
<td class="border p-3"><code>[&.active]:class</code></td>
<td class="border p-3"><code>[&.active]:font-bold</code></td>
</tr>
<tr>
<td class="border p-3 font-semibold" colspan="3">NA RODIČI (s GROUP):</td>
</tr>
<tr>
<td class="border p-3">Data atribut bez hodnoty</td>
<td class="border p-3"><code>group-data-[active]:class</code></td>
<td class="border p-3"><code>group-data-[active]:text-purple-500</code></td>
</tr>
<tr>
<td class="border p-3">Data atribut s hodnotou</td>
<td class="border p-3"><code>group-data-[state=open]:class</code></td>
<td class="border p-3"><code>group-data-[state=open]:block</code></td>
</tr>
<tr>
<td class="border p-3">CSS třída</td>
<td class="border p-3"><code>group-[.danger]:class</code></td>
<td class="border p-3"><code>group-[.danger]:text-red-500</code></td>
</tr>
<tr>
<td class="border p-3 font-semibold" colspan="3">NA PŘEDKOVI (bez GROUP):</td>
</tr>
<tr>
<td class="border p-3">Data atribut bez hodnoty</td>
<td class="border p-3"><code>[[data-expanded]_&]:class</code></td>
<td class="border p-3"><code>[[data-expanded]_&]:block</code></td>
</tr>
<tr>
<td class="border p-3">Data atribut s hodnotou</td>
<td class="border p-3"><code>[[data-theme='dark']_&]:class</code></td>
<td class="border p-3"><code>[[data-theme='dark']_&]:text-white</code></td>
</tr>
<tr>
<td class="border p-3">CSS třída</td>
<td class="border p-3"><code>[.parent_&]:class</code></td>
<td class="border p-3"><code>[.is-open_&]:opacity-100</code></td>
</tr>
<tr>
<td class="border p-3 font-semibold" colspan="3">POTOMEK PODLE RODIČE:</td>
</tr>
<tr>
<td class="border p-3">Potomek podle data atributu</td>
<td class="border p-3"><code>[&[data-collapsed=true]_svg]:class</code></td>
<td class="border p-3"><code>[&[data-collapsed=true]_svg]:rotate-180</code></td>
</tr>
<tr>
<td class="border p-3">Potomek podle CSS třídy</td>
<td class="border p-3"><code>[&.premium_span]:class</code></td>
<td class="border p-3"><code>[&.premium_span]:text-yellow-500</code></td>
</tr>
<tr>
<td class="border p-3">Potomek s třídou</td>
<td class="border p-3"><code>[&[data-state=error]_.icon]:class</code></td>
<td class="border p-3"><code>[&[data-state=error]_.icon]:text-red-500</code></td>
</tr>
</tbody>
</table>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment