W3docs
pt
Entrar

CSS ::first-line Pseudo Element

Use o pseudo-elemento CSS ::first-line para selecionar e estilizar a primeira linha de um contêiner em bloco. Veja exemplos e propriedades.

O pseudo-elemento ::first-line aplica estilos à primeira linha de um contêiner em nível de bloco. Ele não seleciona elementos em nível inline, como imagens ou tabelas inline.

É usado com mais frequência para efeitos tipográficos que jornais e revistas aplicam à linha de abertura de um artigo — uma cor diferente, versaletes ou espaçamento extra entre letras — sem precisar envolver essa linha em marcação adicional. Como a "primeira linha" depende da largura do elemento, do tamanho da fonte e do viewport do usuário, a parte que recebe o estilo é recalculada pelo navegador à medida que o layout muda.

Apenas um conjunto específico de propriedades CSS pode ser aplicado ao ::first-line. A lista completa está detalhada na seção Propriedades Permitidas abaixo.

O pseudo-elemento ::first-letter herda apenas as propriedades aplicáveis ao ::first-line. Para todas as outras propriedades, ele herda do elemento pai. Se ambos os pseudo-elementos forem usados, os estilos definidos em ::first-letter substituem os herdados de ::first-line.

O pseudo-elemento ::first-line também pode ser escrito com dois pontos simples (:first-line), o que é suportado por todos os navegadores.

Versão

CSS Pseudo-Elements Level 4

Selectors Level 3

CSS Level 2

CSS Level 1

Propriedades Permitidas

O pseudo-elemento ::first-line aceita apenas algumas propriedades CSS. Veja quais são:

Especificidade e Herança do Pseudo-elemento ::first-line

O texto na primeira linha herda apenas as propriedades aplicáveis ao pseudo-elemento ::first-line. Para todas as outras propriedades, ele herda do elemento pai. Por exemplo, o pseudo-elemento ::first-letter herda os estilos aplicados pelo pseudo-elemento ::first-line.

O pseudo-elemento ::first-line tem especificidade maior que o seletor do elemento base, portanto seus estilos substituem as declarações normais no elemento. No entanto, as regras CSS !important padrão ainda se aplicam de acordo com as regras normais de cascata.

Sintaxe

Exemplo de sintaxe CSS ::first-line

::first-line {
  css declarations;
}

Exemplo do pseudo-elemento ::first-line:

Exemplo de código CSS ::first-line

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p::first-line {
        color: #85d6de;
        text-transform: uppercase;
      }
    </style>
  </head>
  <body>
    <h2>::first-line selector example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </body>
</html>
Experimente Você Mesmo »

Neste exemplo, apenas as palavras que caem na primeira linha renderizada do parágrafo ficam azul-claro e maiúsculas. Redimensione a janela e a parte estilizada muda automaticamente, porque ::first-line acompanha a linha que o navegador realmente renderiza, não um número fixo de caracteres.

Resultado

Propriedade CSS ::first-line

Pontos Importantes

  • Apenas contêineres em nível de bloco respondem. Aplicar ::first-line a um elemento inline (como um <span> ou um <a> que não tenha sido definido como display: block) não tem efeito.
  • A linha é dinâmica. Não há como selecionar um número fixo de caracteres — se o viewport, a fonte ou o padding mudar, o navegador recalcula qual texto pertence à primeira linha e o reestiliza de acordo.
  • O suporte a propriedades é restrito. Propriedades que afetam o layout (como margin, padding, border ou width) são ignoradas em ::first-line. Use apenas as propriedades listadas em Propriedades Permitidas.
  • A ordem importa com ::first-letter. Ao estilizar ambos, declare-os de forma que o vencedor pretendido fique claro: os estilos de ::first-letter substituem as propriedades correspondentes herdadas de ::first-line. Para estilização de capitulares, consulte o pseudo-elemento ::first-letter.

Prática

Prática
A que o seletor de pseudo-elemento ::first-line pode ser aplicado em CSS?
A que o seletor de pseudo-elemento ::first-line pode ser aplicado em CSS?
Was this page helpful?