::first-line (:first-line)
O pseudoelemento ::first-line
aplica estilos à primeira linha de um elemento no nível do bloco. Observe que o comprimento da primeira linha depende de muitos fatores, incluindo a largura do elemento, a largura do documento e o tamanho da fonte do texto.
/* Seleciona a primeira linha dentro da tag <p> */
p::first-line {
color: red;
}
Nota: O CSS3 introduziu a notação ::first-line
(com dois pontos) para distinguir pseudo-classes de pseudo-elementos. Os navegadores também aceitam :first-line
introduzida no CSS2.
Propriedades permitidas
Somente um pequeno subconjunto de propriedades CSS pode ser usado com o::first-line
pseudo-elemento:
- Todas as propriedades relacionadas à fonte:
font
(en-US),font-kerning
,font-style
(en-US),font-variant
(en-US),font-variant-numeric
(en-US),font-variant-position
(en-US),font-variant-east-asian
(en-US),font-variant-caps
(en-US),font-variant-alternates
(en-US),font-variant-ligatures
(en-US),font-synthesis
(en-US),font-feature-settings
,font-language-override
(en-US),font-weight
,font-size
,font-size-adjust
(en-US),font-stretch
(en-US), efont-family
- Todas as propriedades relacionadas ao background:
background-color
,background-clip
,background-image
(en-US),background-origin
,background-position
,background-repeat
(en-US),background-size
,background-attachment
, ebackground-blend-mode
- A propriedade
color
word-spacing
(en-US),letter-spacing
,text-decoration
,text-transform
, eline-height
(en-US)text-shadow
,text-decoration
,text-decoration-color
(en-US),text-decoration-line
(en-US),text-decoration-style
, evertical-align
.
Sintaxe
Error: could not find syntax for this item
Exemplos
HTML
<p>Os estilos serão aplicados apenas à primeira linha deste parágrafo.
Depois disso, todo o texto será estilizado normalmente. Entendeu o que eu quis dizer?</p>
<span>A primeira linha deste texto não receberá um estilo especial
porque não é um elemento no nível do bloco.</span>
CSS
::first-line {
color: blue;
text-transform: uppercase;
/* AVISO: NÃO UTILIZE: */
/* Muitas propriedades são inválidas em pseudo-elementos ::first-line */
margin-left: 20px;
text-indent: 20px;
}
Resultado
Especificações
Especificação | Status | Comentário |
---|---|---|
CSS Pseudo-Elements Level 4 The definition of '::first-line' in that specification. |
Rascunho atual | Define mais estritamente onde ::first-letter pode ocorrer. Generaliza propriedades permitidas para tipografia, decoração de texto e propriedades de layout embutido e opacity . Define a herança de::first-letter . |
CSS Text Decoration Module Level 3 The definition of 'text-shadow with ::first-line' in that specification. |
Candidata a Recomendação | Permite o uso de text-shadow com ::first-letter . |
Selectors Level 3 The definition of '::first-line' in that specification. |
Recomendação | Introdução da sintaxe de dois-pontos. |
CSS Level 2 (Revision 1) The definition of '::first-line' in that specification. |
Recomendação | Nenhuma mudança. |
CSS Level 1 The definition of '::first-line' in that specification. |
Recomendação | Definição inicial, usando a sintaxe de dois pontos. |
Compatibilidade com navegadores
BCD tables only load in the browser