::first-letterjest pseudoelementem, który pozwala nadać styl pierwszej literze w elemencie bez konieczności przyklejania tagu wokół tej pierwszej litery w kodzie HTML. Chociaż żadne tagi nie są dodawane do DOM, to tak, jakby docelowa pierwsza litera była zawarta w tagu. Możesz stylizować tę pierwszą literę tak, jak w przypadku prawdziwego elementu:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Rezultat jest taki, jakbyś miał fałszywy element wokół pierwszej litery:
The first letter is bold and red.
Pierwsza litera jest pogrubiona i czerwona
- Pseudoelement działa tylko wtedy, gdy element nadrzędny jest blokowym kontenerem (innymi słowy, nie działa na pierwszej literze
display: inline;elementów). - Jeśli masz w elemencie zarówno a, jak
::first-letteri::first-line, pierwsza litera odziedziczy po stylach pierwszej linii, ale style w::first-letterwolą zostaną nadpisane w przypadku konfliktu stylów. - Jeśli generujesz treść za pomocą
::before, pierwsza litera lub znak interpunkcyjny, niezależnie od tego, czy jest częścią oryginalnego węzła tekstowego, czy utworzony z wygenerowaną treścią, będzie celem.
Więcej informacji
- Używając inicjałów wpuszczanych, używaj w połączeniu z,
p:first-of-typewięc nie każda pierwsza litera jest stylizowana - Przykładowe pióro - z wygenerowaną zawartością
- W3C Wiki
- Moduł W3C CSS3 Selectors
Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5.0-5.1 |
Uwaga: W przypadku przeglądarki Internet Explorer 8 i starszych należy użyć pojedynczego dwukropka :first-letterzamiast notacji z podwójnym dwukropkiem.