O ::first-linepseudoelemento serve para aplicar estilos à primeira linha de um elemento. Imagine um parágrafo com várias linhas (como este!). ::first-linepermite estilizar a primeira linha do texto. Você pode usá-lo para torná-lo maior ou configurá-lo em versalete como uma escolha estilística. A quantidade de texto visada por este pseudoelemento depende de vários fatores, como comprimento da linha, largura da janela de visualização, tamanho da fonte, espaçamento entre letras, espaçamento entre palavras. Assim que a linha é quebrada, o texto posterior não é mais selecionado. Observe que não há nenhum elemento DOM real sendo selecionado aqui (portanto, elemento “pseudo”).
Este pseudo-elemento funciona apenas em elementos de bloco (quando displayé ajustado para block, inline-block, table-caption, table-cell). Se definido em um elemento embutido, nada acontece, mesmo se esse elemento embutido tiver uma quebra de linha dentro dele.
Observe também que nem todas as propriedades podem ser usadas em um conjunto de regras contendo ::first-line. Na maioria das vezes:
.element::first-line ( font-style:… font-variant:… font-weight:… font-size:… font-family:… line-height:… color:… word-spacing:… letter-spacing:… text-decoration:… text-transform:… background-color:… background-image:… background-position:… background-repeat:… background-size:… background-attachment:… )A especificação CSS oficial informa aos agentes do usuário que podem permitir outras propriedades, se assim o desejarem:
Os UAs também podem aplicar outras propriedades.
Uma palavra sobre especificidade
A demonstração a seguir mostra como ::first-lineé capaz de substituir qualquer tipo de especificidade, até !important.
- O primeiro parapgraph é definido como cinza por meio de um seletor de tag
- O segundo parágrafo é definido como cinza por meio de um seletor de classe
- O terceiro parapgraph é definido como cinza por meio de um seletor de ID
- O 4º parágrafo é definido como cinza por meio de um! Important bash
Isso ocorre porque o pseudoelemento é tratado como um elemento filho, não apenas uma parte do elemento pai. Portanto, as regras que você aplica a ele são apenas para ele, as regras pai podem ser aplicadas a ele.
Além disso, tente redimensionar seu navegador para ver como o pseudoelemento se comporta quando a largura da janela de visualização muda.
Não há: última linha ou: enésima linha, embora isso fosse legal.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Sim | Sim | Sim | 3,5+ (antigo) 9+ | 5.5+ (antigo) 9+ | Sim | Sim |
Como ::first-lineé um pseudoelemento, ele deve ser precedido por dois pontos, conforme especificado no CSS2.1. No entanto, alguns navegadores suportam apenas a sintaxe de dois pontos (Internet Explorer 5.5 - 9 e Opera 3.5 - 9).