Псевдоэлемент :first-letter | CSS справочник
CSS селекторыЗначение и применение
Псевдоэлемент ::first-letter позволяет создавать инициал (буквицу) — стилизовать начальный символ текстового блока. Такой метод часто можно встретить в печатных изданиях, например, в сказках.
Допустимые свойства, которые применяются с псевдоэлементом:
- background
- border
- clear
- color
- float
- font
- line-height
- margin
- padding
- text-decoration
- text-transform
- vertical-align (если float = «none»)
Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3:
/* синтаксис CSS 3 */ селектор::псевдоэлемент { /* двойное двоеточие */ CSS свойство: значение; } /* синтаксис CSS 2 */ селектор:псевдоэлемент { /* одинарное двоеточие */ CSS свойство: значение; }
Поддержка браузерами
Селектор | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
---|---|---|---|---|---|---|
::first-letter | 1. 0 | 1.0 | 7.0* | 1.0 | 9.0* | 12.0 |
CSS синтаксис:
::first-letter { блок объявлений; }
Версия CSS
CSS1Пример использования
<!DOCTYPE html> <html> <head> <meta charset = "UTF-8"> <title>Псевдоэлементы ::first-letter и ::first-line</title> <style> ::first-letter { /* изменяем начальный символ текстового блока */ color: red; /* устанавливаем цвет шрифта красный */ font-size: 24px; /* задаем размер для первого символа */ } .test::first-line{ /* изменяем первую строку элемента с классом test */ color: green; /* устанавливаем цвет шрифта первой строки зелёный */ font-family: Arial; /* устанавливаем шрифт Arial для первой строки */ } </style> </head> <body> <p>Яндекс. Найдется, всё.</p> <pre class = "test">У лукоморья дуб зелёный; Златая цепь на дубе том: И днём и ночью кот учёный Всё ходит по цепи кругом; Идёт направо - песнь заводит, Налево - сказку говорит. </pre> </body> </html>
В этом примере с помощью псевдоэлемента ::first-letter мы установили, что первая буква каждого текстового блока (в нашем случае абзаца — элемент <p>) будет красного цвета и размером 24 пикселя. Кроме того, с использованием псевдоэлемента ::first-line, мы указали, что первая строка в элементе с классом test (элемент <pre>) будет шрифтом Arial зеленого цвета.
Результат нашего примера:
Пример использования псевдоэлементов :first-letter и :first-line.CSS селекторы::first-letter — CSS — Дока
- Кратко
- Пример
- Как пишется
- Подсказки
Кратко
Скопировано
Псевдоэлемент :
позволяет задать стили для первой буквы первой строки блочного элемента, если перед текстом нет другого содержимого.
Пример
Напишем код, выделяющий первую букву в цитате:
blockquote::first-letter { font-size: 1. 86rem; font-weight: 700; font-style: italic; letter-spacing: 0.12rem;}
blockquote::first-letter {
font-size: 1.86rem;
font-weight: 700;
font-style: italic;
letter-spacing: 0.12rem;
}
Открыть демо в новой вкладкеКак пишется
Скопировано
Для псевдоэлемента сработает лишь небольшой набор CSS-свойств:
- Шорткат
font
и шрифтовые свойства, начинающиеся наfont
;- - Шорткат
background
и свойства фона, начинающиеся наbackground
;- - Шорткат
margin
и внешние отступы, начинающиеся наmargin
;- - Шорткат
padding
и внутренние отступы, начинающиеся наpadding
;- - Шорткат
border
и свойства рамок, начинающиеся наborder
;- - цвет текста
color
; - текстовые свойства
text
,- decoration text
,- shadow text
,- transform letter
,- spacing word
,- spacing line
,- height text
,- decoration - color text
,- decoration - line text
,- decoration - style box
,- shadow float
,vertical
.- align
Подсказки
Скопировано
💡 Знаки препинания, которые предшествуют первой букве или непосредственно следуют за ней, попадают под :
. Как в примере выше, знак кавычки также имеет стили, заданные для первой буквы.
💡 Если вы создаёте содержимое с помощью :
и content
, стили указанные в :
всё равно будут распространяться на первую букву.
Если вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
:
alt + ←
→
:
alt + →
CSS ::Селектор по первой букве
❮ Предыдущий Справочник по селекторам CSS Далее ❯
Пример
Выберите и стилизуйте первую букву каждого элемента
:
p::first-letter
{
размер шрифта: 200%;
цвет: #8A2BE2;
}
Попробуйте сами »
Определение и использование
Селектор ::first-letter
Примечание: Следующие свойства можно использовать с ::first-letter:
- свойства шрифта
- свойства цвета
- свойства фона
- маржинальные свойства
- свойства заполнения
- пограничные свойства
- текстовое украшение
- вертикальное выравнивание (только если float равно ‘none’)
- преобразование текста
- высота строки
- поплавок
- прозрачный
Примечание: Селектор ::first-letter можно использовать только с элементами блочного уровня.
Версия: | CSS1 |
---|
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.
Селектор | |||||
---|---|---|---|---|---|
:: первая буква | 1,0 | 9. 0 | 1,0 | 1,0 | 7,0 |
Синтаксис CSS
:: first-letter {
объявления css ;
}
Демонстрация
Связанные страницы
Учебник CSS: Псевдоэлементы CSS
❮ Предыдущая Справочник по селекторам CSS Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial
Top References
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Лучшие примеры
Примеры HTMLПримеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
:: селектор псевдоэлементов CSS с первой буквой | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.
Могу ли я использовать
Поиск?
:: селектор псевдоэлементов CSS first-letter
— РЕК- global»>
Глобальное использование
99,79% + 0,13% «=» 99,92%Псевдоэлемент CSS, позволяющий стилизовать только первую «букву» текста внутри элемента. Полезно для реализации стиля начальных или буквиц.
Chrome
- 4: Partial support
- 5 — 8: Support unknown
- 9 — 109: Supported
- 110: Supported
- 111 — 113: Supported
Edge
- 12 — 109: Supported
- 110: поддерживается
Safari
- 3.1: Support unknown
- 3.2 — 4: Partial support 01% — Support unknown»> 5: Support unknown
- 5.1 — 16.2: Supported
- 16.3: Supported
- TP: Supported
Firefox
- 2 : Частичная поддержка
- 3: Частичная поддержка
- 3.5 — 109: Поддерживается
- 110: Поддерживается
- 111 — 112: Поддерживается
Opera
- 9 -99.9: Неизвестно0251 10 — 11.5: Partial support
- 11.6 — 93: Supported
- 94: Supported
IE
- 5.5: Support unknown 02% — Partial support»> 6 — 7: Partial support
- 8: Partial support
- 9 — 10: Поддерживается
- 11: Поддерживается
Chrome для Android
- 109: Поддерживается
Safari на IOS
- 3,2 — 4,3: Поддержка Неизвестно
- 5- 16.2: 16.3: 16.2: 16.2: 16.2: 16.2: 16.2: 16.0029
Samsung Internet
- 4 — 18,0: Поддерживается
- 19,0: Поддержано
Opera Mini
- All: Поддержано