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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
---
title: '::first-letter (:first-letter)'
slug: 'Web/CSS/::first-letter'
translation_of: 'Web/CSS/::first-letter'
---
<p>{{ CSSRef() }}</p>
<h2 id="Sumário">Sumário</h2>
<p>O <code>::first-letter</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elementos" title="Pseudo-elements">pseudo-elemento</a> que seleciona a primeira letra da primeira linha de um bloco, se nçao for procedido por qual outro conteúdo (como imagens ou tableas embutidas/inline table) na mesma linha.</p>
<p>A primeira letra de um elemento não é necessariamente uma identificação trivial:</p>
<ul>
<li>Pontuação, <span class="tlid-translation translation" lang="pt"><span title="">que é qualquer caractere definido em Unicode de abertura (Ps), de fechamento (Pe), aspa inicial (Pi), aspa final (Pf) e outras pontuações (Po), precedendo ou imediatamente após a primeira letra também é correspondida</span> <span title="">por esse pseudo-elemento.</span></span></li>
<li><span class="tlid-translation translation" lang="pt"><span title="">Da mesma forma, alguns idiomas têm dígitos que são sempre escritos em maiúsculas, como o IJ em holandês.</span> <span title="">Nesses casos raros, as duas letras do dígrafo devem corresponder ao pseudo-elemento :: first-letter.</span> <span title="">(Isso é pouco suportado pelos navegadores, verifique <a href="#Compatibilidade_de_Navegadores">a tabela de compatibilidade</a></span></span>).</li>
<li><span class="tlid-translation translation" lang="pt"><span title="">Finalmente, uma combinação do pseudoelemento {{cssxref (":: before")}} e a propriedade {{cssxref ("content")}} podem injetar algum texto no início do elemento.</span> <span title="">Nesse caso, <code>::first-letter </code>corresponderá à primeira letra deste conteúdo gerado.</span></span></li>
</ul>
<p><span class="tlid-translation translation" lang="pt"><span title="">Uma primeira linha tem apenas significado em uma caixa de contêiner de bloco; portanto, o pseudo-elemento <code>::first-letter</code> apenas afeta os elementos com um valor de {{cssxref ("display")}} de <code>block</code>, <code>inline-block</code>, <code>table-cell</code></span><span title="">, <code>list-item</code> ou <code>table-caption</code>.</span> <span title="">Em todos os outros casos, <code>::first-letter</code> não tem efeito.</span></span></p>
<p><span class="tlid-translation translation" lang="pt"><span title="">Somente um pequeno subconjunto de todas as propriedades CSS pode ser usado dentro de um bloco de declaração de um conjunto de regras CSS que contém um seletor usando o pseudoelemento <code>::first-letter</code>:</span></span></p>
<ul>
<li>Todas as propriedades de fonts : {{ 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") }} and {{ Cssxref("font-family") }}.</li>
<li>Todas as propriededas de 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") }}, and {{cssxref("background-blend-mode")}}.</li>
<li>Todas as propriedades de margem: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}.</li>
<li>Todas as propriedades de "padding" (preenchimento): {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}.</li>
<li>Todas as bordas: the <span class="tlid-translation translation" lang="pt"><span title="">taquigraficas</span></span> {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, e as propriedades manuscritas.</li>
<li>A propriedade {{ cssxref("color") }}.</li>
<li>As propriedades CSS: {{ 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") }} (somente se <code>float</code> for <code>none</code>).</li>
</ul>
<p>Como toda essa lista será estendida no futuro, é recomendado que você não use qualquer propriedade dentro da declaração do bloco, afim de manter o CSS a qualquer prova.</p>
<div class="note">
<p><span class="tlid-translation translation" lang="pt"><span title="">No CSS 2, os pseudoelementos eram prefixados com um caractere de dois pontos (<code>:</code>).</span> <span title="">Como as pseudo-classes também estavam seguindo a mesma convenção, elas eram indistinguíveis.</span> <span title="">Para resolver isso, o CSS 2.1 mudou a convenção para pseudoelementos.</span> <span title="">Agora, um pseudoelemento é prefixado com dois caracteres de dois pontos (<code>::</code>) e uma pseudo-classe ainda é prefixado com um único dois pontos (<code>:</code>).</span></span></p>
<p>Exemplo de <strong>pseudoclasse</strong>:<br>
<code>.classedoelemento<strong>:</strong>hover { ... }</code></p>
<p>Exemplo de <strong>pesudoelemento:</strong><br>
<code>.classedoelemento<strong>::</strong>first-letter { ... }</code></p>
<p><span class="tlid-translation translation" lang="pt"><span title="">Como vários navegadores já implementaram a versão CSS 2 em uma versão de lançamento, todos os navegadores que suportam a sintaxe de dois pontos também suportam a antiga sintaxe de dois pontos. </span></span></p>
<div class="blockIndicator warning">
<p><span class="tlid-translation translation" lang="pt"><span title="">Mas isso pode mudar, portanto use SEMPRE <code>::</code> para pseudolementos</span></span></p>
<p><span class="tlid-translation translation" lang="pt"><span title="">...a não se que você <strong>precise muito</strong> que seu código seja compatível com Internet Explore 8, então use um carectere de dois pontos.</span></span></p>
</div>
</div>
<h2 id="Exemplo">Exemplo</h2>
<pre class="brush: css notranslate">/* Fazendo odas as letras dos paragrados maior e vermelha */
p::first-letter { /* Use :first-letter if você precise muito de compatibilidade com IE 8 */
color: red;
font-size: 130%;
}
</pre>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificações</th>
<th scope="col">Status</th>
<th scope="col">Comentários</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
<td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
<td><span class="tlid-translation translation" lang="pt"><span title="">Propriedades permitidas generalizadas para tipografia, decoração de texto e propriedades de layout embutido</span></span>, {{ cssxref("opacity") }} e {{ 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>Permitido uso de {{cssxref("text-shadow")}} com <code>::first-letter</code>.</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td><span class="tlid-translation translation" lang="pt"><span title="">Comportamento definido entre maiúsculas e minúsculas, como nos itens da lista, ou com comportamento específico do idioma (como o dígrafo holandês</span></span> <code>IJ</code>). <span class="tlid-translation translation" lang="pt"><span title="">A sintaxe de dois dois-pontos para pseudo-elementos foi introduzida.</span></span></td>
</tr>
<tr>
<td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
<td>{{ Spec2('CSS2.1') }}</td>
<td>Sem mudanças significativas, apesar que CSS nível 2 continuar aceitando apenas um dois-pontos.</td>
</tr>
<tr>
<td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
<td>{{ Spec2('CSS1') }}</td>
<td>Definição inicial de um dois-pontos.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_Navegadores_2"><a id="Compatibilidade_de_Navegadores" name="Compatibilidade_de_Navegadores">Compatibilidade de Navegadores</a></h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Caracteristicas</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Suporte Básico</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>9.0</td>
<td>7.0</td>
<td>1.0 (85)</td>
</tr>
<tr>
<td>Velha sintaxe de um dois-pontos (<code>:first-line</code>)</td>
<td>1.0</td>
<td>{{ CompatGeckoDesktop("1") }}</td>
<td>5.5</td>
<td>3.5</td>
<td>1.0 (85)</td>
</tr>
<tr>
<td>Suporte ao dígrafo Holandês <code>IJ</code></td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }} {{ bug("92176") }} </td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Caracteristicas</th>
<th></th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Suporte Básico</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Velha sintaxe um dois-pontos (<code>:first-line</code>)</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatGeckoMobile("1") }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
<tr>
<td>Suporte ao dígrafo holandês <code>IJ</code></td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
<td>{{ CompatUnknown() }}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>O peseudo-elemento {{cssxref("::first-line")}} .</li>
</ul>
|
