Neste curso veremos como utilizar pseudo-classes e pseudo-elementos para estilizar elementos HTML, afetando até mesmo seus comportamentos apenas com o uso de CSS. pseudo-classes
// conceitos de pseudo-classe e pseudo-elementos \\
- :first-of-type → Será aplicado no primeiro elemento do seletor.
- :last-of-type → Será aplicado no ultimo elemento do seletor.
- :nth-of-type → Estiliza o elemento definido no seletor na posição indicada. (1)(2).
- :nth-of-type(odd) → Aplica o estilo a todos os elementos ímpares.
- :nth-of-type(even) → Aplica o estilo a todos os elementos pares.
- :first-child → Representa qualquer elemento que seja o primeiro filho de seus pais.
- :last-child → Representa qualquer elemento que seja o ultimo filho de seus pais.
- :nth-child → Estiliza o elemento definido no seletor na posição indicada. (1)(2).
- :nth-child(odd) → Aplica o estilo a todos os elementos ímpares.
- :nth-child(even) → Aplica o estilo a todos os elementos pares.
- :nth-last-child → Seleciona um ou mais elementos com base em sua posição entre um grupo de elementos-irmãos, contando a partir do último.
- :hover → Corresponde quando o usuário designa um elemento com um dispositivo apontador, mas não necessariamente o ativa. Este estilo pode ser substituído por qualquer outra pseudo-classe de link-relacionados, isto é
:link, :visited, e :active, aparecendo em regras subsequentes. Na ordem para estilizar apropriadamente links, você precisa colocar a regra:hoverdepois das regras :link e :visited mas antes da regra :active, como definido pela ordem LVHA: :link — :visited — :hover — :active.
- :visited → Deixar marcado o link quando for visitado
- ::first-line → Usado pra Estilizar a primeira linha de um texto
- ::first-letter → Estiliza a primeira letra do código ou estiliza a primeira letra de cada parágrafo.
- ::before → É utilizado para adicionar um conteúdo novo antes do conteúdo do elemento selecionado. A sintaxe content é obrigatorio no uso do before ex: a::before {content: “Link”} para adicionar uma imagem ao valor, precisamos colocar valor vazio no content: “”; . Se a imagem tiver o tamanho maior que a dimensões definidas elas podem aparece cortadas, com isso alem de usar as sintaxe (width: e height:) usamos tbm a background-size: pra fazer a imagem caber na estutura.
- ::after → É utilizado para adicionar um conteúdo novo depois do conteúdo do elemento selecionado. A sintaxe content é obrigatorio no uso do before ex: a::before {content: “Link”} para adicionar uma imagem ao valor, precisamos colocar valor vazio no content: “”; . Se a imagem tiver o tamanho maior que a dimensões definidas elas podem aparece cortadas, com isso alem de usar as sintaxe (width: e height:) usamos tbm a background-size: pra fazer a imagem caber na estutura.