CSS :: Псевдоэлемент ::first-letter

Псевдоэлемент ::first-letter (от англ. first letter – первая буква) позволяет выбрать первый символ текста в элементах требуемого типа, у которых свойство display имеет одно из значений: block, inline-block, list-item, table-cell или table-caption. При этом первая буква элементов с display: inline-block или display: table-cell не должна быть в тоже время и первой буквой родительского элемента. Кроме того, к псевдоэлементу могут применяться только свойства, относящиеся к шрифтам, тексту, полям, границам, отступам, цвету и фону, хотя в зависимости от браузера могут применяться и некоторые другие свойства. Например, если задано правило p::first-letter {блок объявлений}, то данный стиль будет применен ко всем первым буквам абзацев.

Селекторы псевдоэлементов выбирают элементы требуемого типа, явно не указанные в дереве элементов html-документа и соответствующие требованиям указанного в селекторе псевдоэлемента, который отделяется от элемента двумя двоеточиями «::».

Синтаксис

<селектор>::first-letter {блок объявлений}

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/::first-letter

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<title>Пример №1</title>

	<style>
	
		div::first-letter{
		color: red;			 
		}
		
		p::first-line{
		color: blue;			 
		}
		
	</style>
	
</head>
<body>

	<div>
		Первая буква блока будет красной.<br>
		Весь остальной текст будет обычным.
	</div>
	
	<p>
		А у меня будет синей вся первая строка.<br>
		А я не синяя, т.к. вторая.
	</p>
	
</body>
</html>

Пример №1