25
loading...
CSS ::first-letter
É comum olharmos arquivos de javascript e acabarmos encontrando um
toUpperCase() no meio do código sendo usado pra deixar um texto em maiúsculo, e algumas vezes, pra deixar só a primeira letra de uma frase em maiúsculo.Isso funciona? Funciona. É o ideal? Acredito que não. Nesses casos estamos usando JS pra controlar o estilo de alguma parte da nossa tela, e nesse caso o que a gente deve priorizar é a utilização do CSS.
E, não por acaso, apenas com CSS conseguimos definir a primeira letra como maiúscula.
Pra resolver isso precisamos usar o pseudo-elemento
::first-letter.Pra exemplificar vamos usar esse trecho de HTML:
<p class="message">evellyn, seu endereço foi alterado.</p>Temos um parágrafo com a classe
message e com o texto "evellyn, seu endereço foi alterado.", o ideal é o meu nome aparecer com a primeira letra em maiúsculo, com CSS conseguimos fazer isso da seguinte maneira:.message::first-letter {
text-transform: uppercase;
}Com isso alteramos o estilo apenas a primeira letra do seletor
.message, assim a frase vai aparecer do jeito esperado na tela: "Evellyn, seu endereço foi alterado."Com o JS conseguimos fazer muitas coisas mas nem sempre ele é a ferramenta certa pra fazermos tudo, por isso é importante sempre pesquisarmos se com CSS não conseguimos fazer aquela mudança visual na nossa página.
25