Pseudo-elemento CSS ::first-line
Use o pseudo-elemento CSS ::first-line para selecionar e aplicar estilos à primeira linha num contentor ao nível de bloco. Saiba mais sobre o pseudo-elemento e experimente os exemplos.
O pseudo-elemento ::first-line aplica estilos à primeira linha de um contentor ao nível de bloco. Não seleciona elementos ao nível inline, como imagens ou tabelas inline.
Apenas um conjunto específico de propriedades CSS pode ser aplicado a ::first-line. A lista completa está detalhada na secção Propriedades permitidas em baixo.
O pseudo-elemento ::first-letter herda apenas as propriedades aplicáveis a ::first-line. Para todas as outras propriedades, herda do elemento pai. Se ambos os pseudo-elementos forem utilizados, 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), notação que é suportada por todos os browsers.
Versão
Propriedades permitidas
O pseudo-elemento ::first-line aceita apenas algumas propriedades CSS. Vejamo-las:
- Todas as propriedades relacionadas com o tipo de letra: font, font-kerning, font-style, font-variant, font-variant-numeric, font-variant-east-asian, font-variant-caps, font-variant-alternates, font-variant-ligatures, font-feature-settings, font-language-override, font-weight, font-size, font-size-adjust, font-stretch e font-family.
- Todas as propriedades relacionadas com o fundo: background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size, background-attachment e background-blend-mode.
- Algumas propriedades utilizadas para aplicar estilo ao texto: text-shadow, text-decoration, text-decoration-color, text-decoration-line e text-decoration-style.
- A propriedade CSS color.
- word-spacing, line-height, letter-spacing, text-transform e white-space.
Especificidade e herança do pseudo-elemento ::first-line
O texto da primeira linha herda apenas as propriedades aplicáveis ao pseudo-elemento ::first-line. Para todas as outras propriedades, 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 uma especificidade superior à do seletor do elemento base, pelo que os seus estilos substituem as declarações normais do elemento. No entanto, as regras !important padrão do CSS continuam a aplicar-se de acordo com as regras normais da 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>Resultado
