Bem-vindos de volta a todos.
Hoje vamos falar muito brevemente sobre pseudo-classes e elementos.
Então temos trabalhado com diferentes tipos de elementos ao longo de todo este curso,
e como podemos estruturá-los e modelá-los.
Bem, pseudo elementos são diferentes das outras coisas que
já vimos antes em que eles são muito dependentes da estrutura DOM, e
alguns deles são realmente preenchidos dinamicamente.
Então, para ser honesto, você já viu isso antes quando falamos sobre
links de estilo porque os links tinham esses estados diferentes.
Um exemplo que usamos foi a ideia de pairar.
Se você passar o mouse em um link, você pode alterar o estilo para se livrar de talvez o sublinhado ou
alterar a cor.
Então, vamos falar sobre alguns desses diferentes tipos de pseudo-classes além do
que você pode fazer com apenas um link.
Comecei com o que já vimos antes.
Você pode ter um link e também um link que foi visitado.
Você também pode reagir a diferentes ações do usuário.
Então, se alguém estiver pairando sobre um parágrafo ou
pairando sobre uma tag H1, você ainda pode reagir a ela.
Não tem que ser apenas uma ligação.
Você também pode ter ativo, e
ativo é quando você está segurando o botão do mouse sobre algum tipo de elemento.
E o último é o foco.
Foco seria quando alguém está abbing através da página
você pode colocar o foco para baixo em cada um deles.
Finalmente, um que faz muito sentido e você provavelmente já viu antes
é que você pode discar as pseudo-classes de formulários ou interfaces.
Se a caixa de seleção tiver sido clicada ou
marcada, você pode ver que às vezes eles a tornam amarela.
Ou se você já esteve em um site e não tem permissão para digitar algo
até digitar algo em uma caixa acima, mais alto, eles tendem a ficar cinza.
Então, o jeito que você iria em frente e fazer isso é você poderia dizer, você sabe o que?
Se alguém paira sobre o meu parágrafo, quero apenas fazer uma fronteira.
Borda:1 px.
Agora, mesmo que não haja lugar no DOM onde eles tenham p:pairar,
ele deve funcionar para você quando você colocar essa regra de estilo.
Então, você também pode estilo com base na posição estrutural
dos diferentes elementos.
Você tem primeiro filho, último filho, enésimo filho.
A maneira como funciona é colocar um número para dizer o quinto filho ou
o décimo filho.
Você só pode ter um filho.
Você também tem outras coisas diferentes, como primeiro do tipo, último do tipo
, único do tipo.
E novamente, você só tem o elemento, os dois pontos, e
então o nome da pseudo-classe que você deseja estilizar.
Pseudo elementos não são necessariamente parte do DOM, mas
eles podem ser usados para estilizar partes específicas ou únicas da página.
Então, alguns exemplos podem se você tem um parágrafo e você quer colocar em que
primeira letra chique com uma fonte diferente, você pode usar o primeiro pseudo elemento letra.
Mesmo com a primeira linha, você pode gerar coisas para aparecer antes ou
depois dos elementos.
Muitas vezes, se você está estilizando algo como informações de cartão de crédito,
você pode ir em frente e colocar os diferentes tipos de cartões de crédito, mas
tem um pouco antes que diz, e hey, colocar uma foto aqui.
Você também pode estilizar apenas fragmentos de diferentes seleções.
Agora eu não lhe dei muito código quando passamos por aqui porque realmente usar
pseudo classes e pseudo elementos é muito exclusivo para a página que você vai fazer.
Então, mais tarde, quando falamos sobre tabelas, fique de olho, porque eu vou estar usando
um monte de pseudo-classes e pseudo-elementos lá.
É muito importante perceber que não vou ser capaz de cobrir
todas as combinações de tudo o que aprendemos.
Mas eu quero dar-lhe as ferramentas para que você possa sair e
investigar como você pode adicionar alguns novos estilos legais à sua página.
Boa sorte.