Curso
CSS: Pseudo-classes e Pseudo-elementos
Neste curso falaremos sobre a utilização de pseudo-classes e pseudo-elementos no CSS para uma estilização mais personalizada dos elementos HTML. Pseudo-classes tais como first-child, last-child e nth-child, assim como os pseudo-elementos after e before nos ajudam a construir páginas mais customizáveis como, por exemplo, a criação de tabelas zebradas, mudar o estilo de um link quando o cursor do mouse estiver sobre ele etc.
Esse curso inclui:
Suporte em tempo real
Certificado
Carga horária:
8 horas
Curso de CSS (8 aulas)
Aula 1 - Introdução
O próximo passo no aprendizado do CSS é o uso de pseudo-classes e pseudo-elementos para uma estilização mais customizada de elementos HTML, e é isso que começaremos a ver nesta aula.
Aula 2 - Pseudo-classes de Estado
Aprenda nesta aula a utilizar duas importantes pseudo-classes de estado, o hover e o visited. Elas são responsáveis por estilizar um elemento baseado no seu estado, hover quando o mouse estiver em cima de um elemento e visited quando um link já tiver sido aberto por um usuário.
Aula 3 - Pseudo-classes Estruturais: of-type
Aprenda nesta aula a utilizar as pseudo-classes estruturais do tipo of-type, tais como: first-of-type, last-of-type e nth-of-type. Elas são responsáveis por estilizar um elemento com base na sua posição dentro de um elemento pai.
Aula 4 - Pseudo-classes Estruturais: child
Aprenda nesta aula a utilizar as pseudo-classes estruturais do tipo child, tais como: first-child, last-child e nth-child. Elas são responsáveis por criar estilos que só serão aplicados se o elemento estiver em uma posição específica dentro de um elemento pai.
Aula 5 - Pseudo-elementos: alterando partes de um elemento
Aprenda nesta aula a utilizar os pseudo-elementos first-letter e first-line para estilizar partes de um elemento. First-letter e first-line são respectivamente responsáveis por estilizar a primeira letra e a primeira linha de um texto.
Aula 6 - Pseudo-elementos: adicionando conteúdos a um elemento
Aprenda nesta aula a utilizar os pseudo-elementos before e after para adicionar um conteúdo extra antes ou depois de um elemento. Nesta aula você vai aprender a adicionar conteúdos customizáveis em uma página sem a necessidade de criar elementos HTML.
Aula 7 - Exemplo prático
Nesta aula vamos colocar em prática o que aprendemos neste curso. Vamos conhecer um exemplo prático que utiliza diversos recursos que aprendemos, tais como first-of-type, hover e before.
Aula 8 - Faça você mesmo
Nesta aula vamos explicar os passos dados para criar e estilizar a página web que vimos na aula anterior. Lembrando que esta página utiliza algumas das pseudo-classes e pseudo-elementos que vimos no decorrer do curso, tais como: before, hover e first-letter.
Veja outros cursos de HTML e CSS
CSS: Flexbox
CSS: Position relative e absolute
CSS: Position fixed