Solucionado
Olá.
O nome da seção desta aula é "Pseudo-classes", mas no vídeo o professor usa o termo "pseudo-elementos". Posso considerá-los sinônimos ou há alguma diferença? Se houver diferença, como eu identifico corretamente cada uma (para não falar besteira em um diálogo sobre CSS com outro profissional da área)?
Obrigado.
Olá, Matheus. Não são não. Pseudo-classes selecionam elementos regulares, mas sob certas condições, como quando sua posição em relação a irmãos ou quando estão sob um estado específico. Aqui está uma lista de pseudo-classes em CSS3:
// Pseudoclasses dinâmicas
:link
:visited
:hover
:active
:focus
//Pseudoclasses estruturais
:first-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:last-child
:first-of-type
:last-of-type
:only-child
:only-of-type
:root
:empty
//Outras pseudoclasses
:enabled
:disabled
:checked
:not(x)
:target
:lang(language)
Já os Pseudo-elementos criam efetivamente novos elementos que não são especificados na marcação do documento e podem ser manipulados como um elemento regular. Isso apresenta enormes benefícios para criar efeitos interessantes com marcação mínima, também ajudando significativamente a manter a apresentação do documento fora do HTML e no CSS onde ele pertence. Aqui está uma lista de pseudo-elementos em CSS3:
::before
::after
::first-letter
::first-line
Espero que tenha compreendido.
Explicação perfeita, muito obrigado, Daniela. E ainda ajuda saber que para pseudo-classes usa somente uma vez o "dois pontos" (:hover) e para os pseudo-elementos, duas vezes o dois pontos (::first-letter).
Acredito que o professor na aula tenha se confundido, pois ele fala de pseudo-elementos, quando na verdade está explicando pseudo-classes. Irei sugerir a alteração para o time da Alura.
Obrigado.