Seletores CSS
Este curso trata de seletores CSS, os padrões que o navegador compara com os elementos de uma página HTML. Começa por como o CSS chega à página e pela forma de uma regra. Depois passa por seletores de tipo, classe e ID, agrupamento com vírgula e os quatro combinadores. Em seguida vêm seletores de atributo, pseudo-classes de estado e posição e pseudo-elementos como ::before e ::after. A última aula estiliza um form de cadastro acessível sem mudar o markup, usando cada técnica.
O que você vai aprender
- ✓Como regras CSS chegam à página e como uma regra é estruturada
- ✓Seletores de tipo, classe e ID e quando usar cada um
- ✓Agrupamento de seletores e os combinadores descendente, de filho e de irmão
- ✓Seletores de atributo por presença, valor exato e valor parcial
- ✓Pseudo-classes de interação, estado de form e posição entre irmãos
- ✓Pseudo-elementos para conteúdo gerado, trechos de texto e placeholder
O que o CSS faz: conectando estilo ao HTML
Abra qualquer aula desta série num navegador e você vai notar uma coisa: parece simples. Texto preto, links azuis, uma fonte serifada padrão, controles de form no estilo que o sistema operacional trouxer. Isso vem da folha de estilo embutida do navegador, que ele aplica a toda página que não diz o…
Ler a aula completa grátis →Currículo
7 aulasO que o CSS faz: conectando estilo ao HTML
Mostra o que o CSS faz, as três formas de levá-lo à página e as partes de uma regra.
Seletores de tipo, classe e ID
Apresenta seletores de tipo, classe e ID, como cada um combina e por que preferir classes.
Agrupamento e combinadores
Mostra o agrupamento com vírgula e os combinadores descendente, de filho, de irmão adjacente e de irmão geral.
Seletores de atributo
Ensina a selecionar por presença de atributo, valor exato, começo, fim ou trecho, e sem diferenciar maiúsculas.
Pseudo-classes: estado e estrutura
Trata de pseudo-classes para hover, foco e clique, estados de controles de form e posição entre irmãos.
Pseudo-elementos: ::before e ::after
Explica ::before e ::after com a propriedade content obrigatória, além de ::first-line, ::first-letter e ::placeholder.
Juntando tudo: estilizando o form de cadastro
Estiliza um form de cadastro acessível com seletores de tipo, classe, atributo, pseudo-classes e pseudo-elementos, incluindo :user-invalid e :has(), sem mudar o HTML.