logo

CSS :first-letter не работает: как стилизовать первую букву

Быстрый ответ

CSS
Скопировать код
.element::first-letter {
  font-size: 200%;
  color: red;
}

Псевдоэлемент ::first-letter применим только к блочным элементам. Убедитесь, что ваш элемент является блочным, например, <p> или <div>. Наличие вложенных строчных элементов, таких как <span>, может помешать работе ::first-letter. Используйте двойное двоеточие :: для обозначения в современных браузерах, одинарное двоеточие : подходит для поддержки старых версий.

Выбор подходящих элементов

::first-letter работает только в случае, если целевой HTML-элемент является блочным, таким как <p>, <div>, заголовки <h1>-<h6>, <li> и т.д.

CSS
Скопировать код
/* Пример применения с блочным элементом */
.block-element::first-letter {
  font-size: larger;
}

Не пытайтесь применить ::first-letter к строчным элементам типа <span> или <a>. Для того чтобы это сработало, нужно изменить их свойство display на block или inline-block.

CSS
Скопировать код
/* Преобразуем строчный элемент в блочный */
.inline-element {
  display: block;
}

Учет начала содержимого

::first-letter не воспринимает небуквенные символы и теги перед первой буквой. Следует избегать пробелов, знаков пунктуации и тегов перед псевдоэлементом.

CSS
Скопировать код
/* Пробелы перед начальной буквой – не лучшая практика */
.element::first-letter {
  background-color: yellow;
}

Использование псевдоэлемента :before

Если вы добавили контент с помощью :before, то ::first-letter будет относиться к этому добавленному контенту, а не к тексту элемента.

CSS
Скопировать код
/* Здесь первой "буквой" будет звезда, а не текст */
.element:before {
  content: "★";
}

.element::first-letter {
  font-size: 200%;
  color: orange;
}

Понимание псевдоклассов

::first-letter – это псевдоэлемент, который можно рассматривать как специальный вид псевдокласса. Эти селекторы позволяют стилизовать отдельные части элементов.

CSS
Скопировать код
/* На примере стилизуем только первую букву */
.kung-fu-class::first-letter {
  text-transform: uppercase;
}

Визуализация

Предположим, что вы хотите выделить первую букву в слове из большого абзаца текста:

Markdown
Скопировать код
Пример текста: "Жили-были..."

Но что если подсветка с помощью :first-letter не выполняется?

Markdown
Скопировать код
| Тип подсветки        | Работоспособность   |
| -------------------- | -----------------  |
| Обычная подсветка    | 🖍️                |
| Подсветка `:first-letter` | ❌            |

И вот решение: ваш текстовый контейнер должен иметь свойство display блочного или строчно-блочного типа.

Markdown
Скопировать код
CSS-правило: { display: block; } или { display: inline-block; }

Попробуем ещё раз:

Markdown
Скопировать код
| Тип подсветки        | Работоспособность   |
| -------------------- | --------------------|
| Подсветка `:first-letter` | 🎨 (Теперь работает!) |

Теперь, когда вы используете :first-letter, первая буква выделена настолько ярко, как вы и задумывали!

Баланс стиля и совместимости

Совместимость элементов — важный аспект. Неправильный выбор подхода к стилизации может привести к неработоспособности ::first-letter. Для современных браузеров используйте ::, а для обеспечения совместимости со старыми версиями — :. Обратите внимание на типографику, чтобы стиль не нарушал общую гармонию дизайна.

Изучение надёжных источников

Будьте вы опытным разработчиком или новичком, интересующимся деталями работы с ::first-letter, я рекомендую обратиться к документации MDN.

Полезные материалы

  1. ::first-letter – CSS | MDN
  2. ::first-letter | CSS-Tricks
  3. Селектор ::first-letter в CSS – W3Schools
  4. Селекторы уровня 3 – W3C
  5. CSS – Псевдоэлементы – TutorialsPoint