::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;элементов). - Если у вас есть как a, так
::first-letterи::first-lineна элементе, первая буква будет унаследована от стилей первой строки, но стили на элементе::first-letterбудут перезаписаны при конфликте стилей. - Если вы создаете контент с помощью
::before, то целью будет первая буква или знак препинания, будь то часть исходного текстового узла или созданный с помощью сгенерированного контента.
Дополнительная информация
- При использовании для буквиц используйте вместе с,
p:first-of-typeчтобы стилизовать не каждую первую букву - Пример пера - с созданным содержимым
- W3C Вики
- Модуль W3C CSS3 Selectors
Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | 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вместо двойного двоеточия.