Zápis
element:first-letter {
/* styl pro první písmeno */
}Správně by se asi měly používat dvojtečky dvě (dvě dvojtečky značí pseudo-element), ale fungovalo by to potom jen od IE 9. S jedinou dvojtečkou funguje first-letter i v IE 6 a novějších.
Jedná se tedy o široce podporovaný selektor.
První písmeno bude červené.
Využití
Selektor prvního písmene se hodí minimálně v následujících případech.
Převedení prvního písmena na velké
Kombinací :first-letter a text-transform: uppercase zvětšíme první písmeno nadpisu, odstavce nebo čehokoliv jiného bez úpravy zdrojového kódu.
odstavec v HTML kódu začíná malým písmenem, ale CSS první písmeno zvětší.
Vytvoření zajímavějších stylů
Díky first-letter je možné umocnit efekt kapitálek (font-variant: small-caps). Hodí se například pro zajímavější styl nadpisů.
Text napsaný kapitálkami
Toto první písmeno je více zvětšeno
Zvětšení písmene na začátku textu
Rozplaváním prvního písmene a přidáním marginu dosáhneme požadovaného efektu bez změny HTML kódu.
První písmeno bude výrazně zvětšené a další text kolem něj bude obtékat klidně dva řádky.
Nevýhoda je, že musíme skloubit:
- velikost písma,
- styl písma,
- odsazení,
- výšku řádku
Aby to nějak vypadalo. Když se některá z výše uvedených hodnot změní, bude nejspíš nutné si hodnotami laborovat znovu.
Tento problém by v budoucnu mohla řešit CSS vlastnost initial-letter. Nyní to umí řešit skript dropcap.js.
Nefunkční :first-letter
Trochu zrada je, že first-letter nezaměří první písmeno elementu, který není blokový. Třeba pro obyčejný <span> to proto nebude fungovat.
Řešení je použít blokový element. Případně přidat display: block / display: inline-block pro element, kde je cílem :first-letter použít.
Odkazy jinam
Související články
Možnosti stylování <iframe>
Co lze a nelze u <iframe> ovlivnit pomocí CSS a jak na změnu textu nebo barev.
Zvýraznění aktivní sekce při rolování
Moderní způsoby zvýraznění aktivní položky navigace podle aktuální sekce – CSS i IntersectionObserver.
