::first-line (:first-line)

Esta tradução está incompleta. Ajude a traduzir este artigo em inglês

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;
}

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:

Sintaxe

/* CSS3 syntax */
::first-line

/* CSS2 syntax */
:first-line

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 do navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::first-lineChrome Full support 1
Notes
Full support 1
Notes
Notes Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Full support 1
Notes Alternate Name
Notes Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Alternate Name Uses the non-standard name: :first-line
Edge Full support 12
Full support 12
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: :first-line
Firefox Full support 1
Full support 1
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: :first-line
IE Full support 9
Full support 9
Full support 5.5
Alternate Name
Alternate Name Uses the non-standard name: :first-line
Opera Full support 7
Notes
Full support 7
Notes
Notes From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See Chromium bug 129669.
Full support 3.5
Notes Alternate Name
Notes From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See Chromium bug 129669.
Alternate Name Uses the non-standard name: :first-line
Safari Full support 1
Notes
Full support 1
Notes
Notes The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Full support 1
Notes Alternate Name
Notes The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Alternate Name Uses the non-standard name: :first-line
WebView Android Full support ≤37
Notes
Full support ≤37
Notes
Notes Before WebView 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Full support ≤37
Notes Alternate Name
Notes Before WebView 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Alternate Name Uses the non-standard name: :first-line
Chrome Android Full support 18
Notes
Full support 18
Notes
Notes Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Full support 18
Notes Alternate Name
Notes Before Chrome 62, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Alternate Name Uses the non-standard name: :first-line
Firefox Android Full support 4
Full support 4
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :first-line
Opera Android Full support 10.1
Notes
Full support 10.1
Notes
Notes From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See Chromium bug 129669.
Full support 10.1
Notes Alternate Name
Notes From Opera 15 to Opera 49 (exclusive), the text-transform property does not work on ::first-line or :first-line pseudo-elements. See Chromium bug 129669.
Alternate Name Uses the non-standard name: :first-line
Safari iOS Full support 1
Notes
Full support 1
Notes
Notes The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Full support 1
Notes Alternate Name
Notes The text-transform property does not work for ::first-line or :first-line pseudo-elements. See WebKit bug 3409.
Alternate Name Uses the non-standard name: :first-line
Samsung Internet Android Full support 1.0
Notes
Full support 1.0
Notes
Notes Before Samsung Internet 8.0, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Full support 1.0
Notes Alternate Name
Notes Before Samsung Internet 8.0, the text-transform property does not work on ::first-line pseudo-elements. See Chromium bug 129669.
Alternate Name Uses the non-standard name: :first-line

Legend

Full support  
Full support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

Veja também