CSS selektory prakticky – perfektní výčet položek

CSS selektory, pseudo-elementy a pseudo-třídy jsou mocnou zbraní v rukou šikovného CSS kodéra. Umožňují vám měnit vzhled konkrétních položek, aniž byste museli používat např. třídy či ID. Ale konec planých řečí, příklad řekne víc než tisíc slov.

Předpokládejme, že máte jednoduchý seznam položek (jedno jestli UL či OL) a chcete z něj udělat výčet ve formě jednoduché věty. Tedy z

<ul>
 <li>První položka</li>
 <li>Druhá položka</li>
 <li>Třetí položka</li>
 <li>Čtvrtá položka</li>
</ul>

Udělat něco jako

První položka, druhá položka, třetí položka a čtvrtá položka.

Klasický mudla by prostě seznam přepsal. Běžný kodér/programátor by zřejmě nažhavil javascript prostě by položky překopal skriptem. Ale zkušený CSS mág to zvládne jen pomocí pár kaskádových stylů:

li{display:inline-block;}
li:first-letter{text-transform:lowercase;}
li:first-child:first-letter{text-transform:none;}
li:after{content:",";}
li:last-child:after{content:".";}
li:nth-last-child(2):after{content:" a "}

Vysvětlení každého řádku je celkem zřejmé každému, kdo umí anglicky, ale přesto to popíšu řádek po řádku:

li{display:inline-block;}

První řádek je jasný, dělá z položek LI seznamu řádkové bloky, tedy místo toho, aby byl každý na svém řádku jsou všechny hezky za sebou.

li:first-letter{text-transform:lowercase;}

Chceme, aby položky seznamu začínaly malým písmenem a to zařídí druhý řádek. Využívá první pseudo element :first-letter a tedy popisuje, co dělat s prvním písmenem každého LI prvku.

li:first-child:first-letter{text-transform:none;}

Ovšem nechceme, aby malým písmenem začínala první položka, musí to být správně napsaná věta. To řeší předchozí kód, který využívá málo známého řetězení CSS selektorů. Kromě již známého :first-letter tu máme pseudo-třídu :first-child, a tedy ovlivňujeme jen první položku (mimochodem správně by měl mít seznam malá písmena už v HTML kódu a naopak tam kde chceme aby byla velká bychom to přes podobné nastavení měnili, nemuseli bychom tak řešit problém u položek, které začínají např. jménem.)

li:after{content:",";}

Pseudoelementy patří k známějším CSS selektorům (někdy příště představím pár triků, které je využívají) a umožňují vygenerovat v CSS specifický obsah a ovlivnit jeho chování. Obsah musíte nadefinovat přes CSS vlastnost content. My v tomto příkladu používáme pseudo-element :after k tomu, že za každý prvek dáváme čárku (mimochodem obdobně funguje pseudoelement :before, ale ten jsme tu nemohli použít, protože měníme v předchozím odstavci první znak a tím bychom ovlivňovali onen vkládaný obsah, místo vlastního prvku.

li:last-child:after{content:".";}

Za posledním elementem ovšem nechceme čárku ale tečku, a to nám pomůže vyřešit další použitá pseudotřída :last-child – jak jste jistě pochopili, ovlivňujete s ním chování posledního prvku. Opět se využívá zřetězení CSS selektorů, v tomto případě opět s pseudo-elementem :after. Díky větší specifičnosti (a také umístění) nahradí u posledního prvku předchozí definici.

li:nth-last-child(2):after{content:" a "}

Poslední řádek používá pokročilých pseudotříd, konkrétně :nth-last-child(n), což je třída pro n-tý (v našem příkladě 2.) prvek v poli počítáno od konce (na rozdíl od :nth-child(n). A opět jej řetězíme s pseudoelementem :after, zde konkrétně nahrazujeme čárku za ” a “, díky čemuž budou poslední dvě položky oddělené spojkou místo čárky.

A to je vše, schválně si to vyzkoušejte, zkuste si jak se se náš seznam chová s dvěma, nebo třeba jen jednou položkou.

Více informací o CSS selektorech najdete přímo v dokumentaci W3C.

Related posts:

1. CSS styl pro pseudoelement :after