WDD 131: Fundamentos da Web Dinâmica

S03 – Atividade de Aprendizagem: Pseudosseleção CSS

Visão Geral

Pseudoclasses e pseudoelementos melhoram as habilidades e/ou o conteúdo de seletores específicos. Uma pseudoclasse é usada para definir um estado especial de um elemento. Por exemplo, pode alterar a cor de um botão quando o usuário passa o cursor sobre ele. Um pseudoelemento estiliza partes específicas de um elemento, como a primeira letra ou a primeira linha de um parágrafo.

Pseudoclasses

• Referência: 📑 Pseudoclasses – MDN
• Referência: 📑 :root – MDN
  A pseudoclasse :root do CSS pode ser útil para declarar variáveis CSS globais – MDN.
  Quais são as vantagens de usar variáveis CSS/propriedades personalizadas?
  Avalie Seu Conhecimento

  As variáveis CSS são vantajosas porque aumentam a facilidade de manutenção, centralizando valores usados frequentemente, permitindo que sejam modificados em um único ponto.

  O que a IA diz sobre as vantagens de usar variáveis CSS?

Instruções da Atividade: Pseudoclasses

1. Bifurque (copie) esta Atividade de Pseudoclasses CSS do CodePen ☼ para sua própria conta do CodePen.
2. Em sua cópia do CodePen, adicione regras de pseudoclasse CSS para que as tags de âncora sejam azul-marinho para links ativos e links visitados.
3. Adicione uma regra de pseudoclasse CSS para que as tags de âncora mudem para roxo para o efeito de hover nos links.
4. Adicione uma regra de pseudoclasse CSS para fornecer bordas para div.datatable para que as bordas dos elementos div.col não dupliquem. (veja o exemplo na captura de tela abaixo)
5. Faça com que a última linha da tabela de dados tenha uma cor de fundo cinza mais escura usando a pseudoclasse :last-child.
6. Configure uma variável CSS para o valor abreviado da borda na pseudoclasse :root como 1px solid #777;
   Dicas

   • :root { --bord: _____}, então use com var(--bord) quando necessário,
     por exemplo, border-right: var(--bord);
   • Considere usar border-top em vez do atalho da propriedade border CSS para definir de maneira mais precisa suas bordas.
   • Use as pseudoclasses :nth-child() e :last-child.

Pseudoelementos

• Referência: 📑 Pseudoelementos – MDN

  A maioria dos navegadores aceita dois-pontos simples em vez de dois-pontos duplos. No entanto, é uma boa prática usar sempre dois dois-pontos :: ao selecionar pseudoelementos em CSS.

Instruções da Atividade

1. Bifurque este CodePen ☼ Pseudoelementos CSS para sua própria conta do CodePen.
2. Adicione uma nova regra CSS para os itens da lista ordenada que usa um pseudoelemento marcador.
3. Nesta nova regra, adicione 3 declarações para alterar a aparência da lista ordenada:
   1. Faça o marcador do item da lista se tornar uma marca de verificação usando content
   2. Deixe o marcador na cor como navy
   3. Deixe o tamanho da fonte como 2rem