::first-letterje pseudo prvok, ktorý vám umožňuje upravovať štýl prvého písmena v prvku bez toho, aby ste okolo tohto prvého písmena vo svojom HTML museli prilepiť značku. Aj keď do DOM nie sú pridané žiadne značky, je to akoby cieľové prvé písmeno bolo obsiahnuté v značke. Toto prvé písmeno môžete štýlovať ako skutočný prvok pomocou:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Výsledok je, akoby ste okolo prvého písmena mali faux element:
The first letter is bold and red.
Prvé písmeno je tučné a červené
- Pseudoprvok funguje, iba ak je nadradeným prvkom blok kontajnera (inými slovami, nefunguje na prvé písmeno
display: inline;prvkov). - Ak máte element
::first-letteraj::first-linena prvku, prvé písmeno bude dedené zo štýlov prvého riadku, ale štýly na::first-letterprepísaní sa pri konflikte štýlov prepíšu. - Ak generujete obsah pomocou
::before, bude cieľom prvé písmeno alebo interpunkčný znak, či už je to súčasť pôvodného textového uzla alebo je vytvorený s vygenerovaným obsahom.
Viac informácií
- Pri použití pre drop-cap používajte spolu s,
p:first-of-typetakže nie každé prvé písmeno bude stylizované - Príklad pera - s vygenerovaným obsahom
- W3C Wiki
- Modul selektorov W3C CSS3
Podpora prehľadávača
Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.
Desktop
| Chrome | Firefox | IE | Hrana | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mobil / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5,0-5,1 |
Poznámka: Pre Internet Explorer 8 a starší používajte :first-letternamiesto dvojitého dvojbodka jeden dvojbodku.