WDD 130: Fundamentos da Web

S03 Atividades de Aprendizagem: Seletores CSS – Tipo, Universal, Classe, ID

Visão Geral

Os seletores CSS são a forma de especificar o elemento que você deseja estilizar. Eles funcionam como o cabeçalho de uma regra CSS.

Preparação

O seletor de uma regra do CSS é a primeira parte da regra que informa ao navegador quais elementos do HTML devem ter os valores de propriedade CSS aplicados. Os elementos selecionados pelo seletor são chamados de assunto do seletor.

Tipos de Seletores CSS

Os seletores CSS podem ser de diferentes tipos, dependendo se você deseja especificar o elemento pelo seu tipo, ID ou classe.

Tipo de Seletor Exemplo Aplicação de Regras do CSS
Universal * { ... } Aplica-se a todos os elementos
Tipo (Elemento) h1 { ... } Aplica-se a todos os elementos <h1>
Classe .vermelho {... } Aplica-se a todos os elementos com o valor de classe "vermelho"
ID #vermelho {... } Aplica-se ao único elemento com o valor de id "vermelho"

Utilizando o Atributo Class

Um atributo class pode ser aplicado a muitos elementos em um documento. Mais de uma classe pode ser aplicada a um único elemento. A classe pode ser selecionada usando a notação de ponto (.).

HTML CSS
<div class="callout highlight active">
<span class="highlight"> 		.highlight {declarações}
.callout {declarações}
.active {declarações}

Usando ID

Um atributo id só pode ser aplicado a um elemento por documento, e cada elemento só pode ter um id. O id pode ser selecionado pelo seletor de id CSS, usando a notação hash (#).

HTML CSS
<nav id="submenu"> #submenu {declarações}

Instruções da Atividade

  1. No VS Code, abra o arquivo classe-e-id.html localizado na pasta semana03.
  2. Abra também o arquivo classe-e-id.css localizado na subpasta estilos da semana03.
  3. Abra a página no seu navegador usando o Live/Five Server e observe o layout e os estilos aplicados aos elementos div.
  4. Usando o VS Code, abra o arquivo classe-e-id.html, remova a classe highlight do segundo <div>, deixando apenas uma classe para esse parágrafo, chamada box. O que acontece? Vale a pena abrir o arquivo CSS para ver o que esses estilos fazem.
    Avalie Seu Conhecimento 

    <ul class="box">
    Esse segundo elemento div não está mais estilizado com a classe "highlight" e, portanto, perde essas declarações específicas.

  5. No HTML, tente adicionar outro elemento div com o atributo id "note", assim: 
    <div id="note">
  <p>Testando o ID note.</p>
</div>
    O que acontece no VS Code?
    Avalie Seu Conhecimento

    No VS Code, o editor avisa sobre um problema destacando o atributo id duplicado com uma linha ondulada.

    Aviso de ID Duplicado

    Observe que o navegador realmente usa o estilo CSS, mas isso é um erro de validação HTML que o navegador tenta ignorar automaticamente.

Recursos Opcionais