Псевдоэлемент ::first-letter | Справочник CSS
http://belarusweb.net
Основы создания сайтов

Псевдоэлемент ::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 {блок объявлений}

Ссылки

Примеры

HTML Результат BwCodes
<!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