První, poslední, liché

Teď se podíváme na otevírací dobu. Je to seznam, ve kterém je každý řádek prvek li se dnem vlevo a hodinami vpravo. Delší seznamy se čtou lépe, když má každý druhý řádek jiné pozadí: oči pak nesklouznou na vedlejší řádek.

Tailwind má varianty podle pozice prvku mezi jeho sourozenci, tedy dětmi stejného rodiče:

Varianta	Platí pro	CSS
`first:`	první dítě	`:first-child`
`last:`	poslední dítě	`:last-child`
`odd:`	1., 3., 5.… dítě (liché, anglicky odd)	`:nth-child(odd)`
`even:`	2., 4., 6.… dítě (sudé, anglicky even)	`:nth-child(even)`

Pozor: třída patří na každý řádek, ne na seznam. Každý řádek si sám zjistí, jestli je lichý (nebo první, nebo poslední), a jen tehdy se třída použije. Proto mají všechny řádky stejné třídy, a když nějaký řádek přidáte nebo odeberete, pruhy se budou dál správně střídat.

<ul>
	<li class="odd:bg-stone-100">Pondělí</li>
	<li class="odd:bg-stone-100">Úterý</li>
	<li class="odd:bg-stone-100">Středa</li>
</ul>

Řádky jsou také oddělené čarami: každý má dole rámeček (border-b). Poslední řádek ho nepotřebuje, protože tam seznam stejně končí. Třída last:border-b-0 odebere rámeček jen poslednímu řádku.

Pokyny

Přidejte všem sedmi řádkům otevírací doby třídu odd:bg-stone-100.

Přidejte všem sedmi řádkům třídu last:border-b-0.

Začněte programovat zdarma

8/9