::first-letterje pseudo prvek, který vám umožňuje stylovat první písmeno v prvku, aniž byste museli vložit HTML kolem tohoto prvního písmene ve vašem HTML. I když do DOM nejsou přidávány žádné značky, je to, jako by cílené první písmeno bylo zahrnuto do značky. První písmeno můžete stylovat jako skutečný prvek pomocí:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Výsledek je, jako byste měli kolem prvního písmene faux prvek:
The first letter is bold and red.
První písmeno je tučné a červené
- Pseudo prvek funguje, pouze pokud je nadřazeným prvkem blok kontejneru (jinými slovy, nefunguje na první písmeno
display: inline;prvků). - Pokud máte prvek
::first-lettera::first-linena prvku, zdědí první písmeno styly první čáry, ale styly na::first-lettervůli se při konfliktu stylů přepíší. - Pokud generujete obsah pomocí
::before, bude cílem první písmeno nebo interpunkční znak, ať už je to součást původního textového uzlu nebo vytvořený s generovaným obsahem.
Více informací
- Při použití pro drop-caps používejte ve spojení s,
p:first-of-typetakže ne každé první písmeno bude stylizované - Ukázkové pero - s generovaným obsahem
- W3C Wiki
- Modul selektorů W3C CSS3
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5.0-5.1 |
Poznámka: U aplikace Internet Explorer 8 a nižší použijte :first-letternamísto dvojitého dvojtečka jednoduchý dvojtečku .