First-letter

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:

  1. velikost písma,
  2. styl písma,
  3. odsazení,
  4. 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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Selektory :first-child a :last-child

Selektory :first-child a :last-child

Pro zaměření první/poslední položky v CSS lze místo přidávání tříd použít :first/last-child.

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

CSS 3 selektory

Seznam všech CSS 3 selektorů

V CSS 3 je spousta selektorů, které s postupným mizením starších prohlížečů může dávat smysl znát.

CSS 3 selektory v IE 6, 7, 8

CSS 3 selektory ve starých IE

Doplnění podpory CSS 3 selektorů do starých prohlížečů pomocí JavaScriptu.

Označení externích odkazů

Označení interních a externích odkazů

Odlišení interních a externích odkazů a odkazů na soubory čistě v CSS.

Komentáře