1
resposta

Qual a diferença entre pseudo-classes e pseudo-elementos?

Eu dei uma pesquisada aqui mas não entendi direito

1 resposta

Poderia simplificar a explicação e me retorne para eu saber se você entendeu.

Basicamente pseudo-classes auxiliariam na interação com a classe selecionada.

Ex. de pseudo-classe:

.menu_texto {
    color: #000000;

}

.menu_texto:hover{
    color: #FFFFFF;

Aqui a classe .menu_texto sem a interação de passar o mouse por cima teria a cor preta e quando você passar por cima trocaria para branca, pois você adicionou a pseudo-classe :hover.

Já os pseudo-elementos serviriam mais para selecionar um elemento já existente e realizar uma ação sobre o mesmo ou até mesmo posicionar algum elemento não semântico, como por exemplo um ícone.

Ex. de um pseudo-elemento seria o seguinte, digamos que eu tenho vários parágrafos, porém quero selecionar o primeiro parágrafo e realizar uma alteração em sua primeira letra (um elemento específico), neste caso eu utilizaria o seguinte pseudo-elemento:

p::first-letter {
  font-weight: bold;
  }

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software