::first-letter- це псевдоелемент, який дозволяє стилізувати першу літеру в елементі, без необхідності приклеювати тег навколо цієї першої літери у своєму HTML. Хоча до DOM не додаються теги, це ніби орієнтована перша буква охоплена тегом. Ви можете оформити цю першу букву так, як це було б для реального елемента, за допомогою:
p::first-letter ( font-weight: bold; color: red; )
The first letter is bold and red
Результат такий, ніби у вас є фальшивий елемент навколо першої літери:
The first letter is bold and red.
Перша буква жирний і червоний
- Псевдоелемент працює лише в тому випадку, якщо батьківським елементом є блок контейнерних блоків (іншими словами, він не працює з першою літерою
display: inline;елементів). - Якщо у вас є як елемент, так
::first-letterі::first-lineелемент, перша буква буде успадковуватися від стилів першого рядка, але стилі у::first-letterволі замінять, коли стилі конфліктують. - Якщо ви генеруєте вміст за допомогою
::before, першою літерою або розділовим символом, незалежно від того, є він частиною вихідного текстового вузла чи створений із створеним вмістом, буде ціллю.
Більше інформації
- Використовуючи для крапель, використовуйте разом із
p:first-of-typeтаким чином, щоб не кожна перша буква отримувала стиль - Приклад пера - із створеним вмістом
- W3C Wiki
- Модуль селекторів W3C CSS3
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 9 | 3.5 | 9 | 12 | 5.1 |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 | 5,0-5,1 |
Примітка. Для Internet Explorer 8 і старіших версій використовуйте одну двокрапку :first-letterзамість позначення з двома двокрапками.