1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: '::first-letter (:first-letter)'
slug: 'Web/CSS/::first-letter'
tags:
- CSS
- Layout
- Reference
- Псевдоэлементы
translation_of: 'Web/CSS/::first-letter'
---
<div>{{CSSRef}}</div>
<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::first-letter</code></strong> применяет стили к первой букве первой строки <a href="/ru/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">блочного элемента</a>, но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы).</p>
<pre class="brush: css no-line-numbers">/* Стили для первой буквы элемента <p> */
p::first-letter {
font-size: 130%;
}</pre>
<p>Может быть непросто определить первую букву элемента:</p>
<ul>
<li>Пунктуация, которая предшествует или следует сразу за первой буквой, включается в селектор. Пунктуация включает любой символ Юникода, определённый в классах <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), and <em>other punctuation</em> (Po).</li>
<li>В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, например <code>IJ</code> в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу <code>::first-letter</code> (это слабо поддерживается браузерами, смотрите <a href="/En/CSS/::first-letter#Browser_compatibility" title="https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility">таблицу совместимости</a> ниже).</li>
<li>Комбинация псевдоэлемента {{ cssxref("::before") }} и свойства {{ cssxref("content") }} может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу <code>::first-letter</code> будет соответствовать первая буква добавленного содержимого.</li>
</ul>
<div class="note">
<p>В CSS3 появилась запись <code>::first-letter</code> (с двумя двоеточиями) для различения <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассов</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементов</a>. Браузеры также поддерживают запись <code>:first-letter</code>, введённую в CSS2.</p>
</div>
<h2 id="Разрешённые_свойства">Разрешённые свойства</h2>
<p>Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом <code>::first-letter</code>:</p>
<ul>
<li>Все свойства, связанные с шрифтами: {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} и {{ Cssxref("font-family") }}</li>
<li>Все свойства, связанные с фоном: {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }} и {{cssxref("background-blend-mode")}}</li>
<li>Все свойства для внешних отступов: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li>
<li>Все свойства для внутренних отступов: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li>
<li>Все свойства, связанные с рамкой: сокращения {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}} и полные записи свойств</li>
<li>Свойства {{ cssxref("color") }}</li>
<li>Свойства {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (только если <code>float</code> равен <code>none</code>)</li>
</ul>
<h2 id="Синтаксис">Синтаксис</h2>
{{csssyntax}}
<h2 id="Example" name="Example">Пример</h2>
<p>Сделаем первую букву каждого абзаца красной и большой.</p>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat.</p>
<p>-Начало специального знака препинания.</p>
<p>_Начало специального знака препинания.</p>
<p>"Начало специального знака препинания.</p>
<p>'Начало специального знака препинания.</p>
<p>*Начало специального знака препинания.</p>
<p>#Начало специального знака препинания.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">p::first-letter {
color: red;
font-size: 130%;
}</pre>
<h3 id="Результат">Результат</h3>
<p>{{ EmbedLiveSample('Example', '80%', 420) }}</p>
<h2 id="Спецификации">Спецификации</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарий</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
<td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
<td>Обобщает разрешённые свойства до типографических, оформления текста, инлайн свойств разметки, {{cssxref("opacity")}} и {{ cssxref("box-shadow") }}.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-letter')}}</td>
<td>{{ Spec2('CSS3 Text Decoration')}}</td>
<td>Разрешает использовать {{cssxref("text-shadow")}} с <code>::first-letter</code>.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Введение синтаксиса с двумя двоеточиями. Определения поведения в граничных случаях, таких как внутри элементов списка или для некоторых специфичных языков (например Нидерландский диграф <code>IJ</code>).</td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Нет изменений.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Изначальное определение, используя синтаксис с одним двоеточием.</td>
</tr>
</tbody>
</table>
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<div>
<p>{{Compat("css.selectors.first-letter")}}</p>
</div>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{cssxref("::first-line")}}</li>
</ul>
|
