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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример текста: "Жили-были..."

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

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

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

CSS-правило: { display: block; } или { display: inline-block; }

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

| Тип подсветки        | Работоспособность   |
| -------------------- | --------------------|
| Подсветка `: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