Regras CSS para o seletor escolhido:

Seletores CSS 2.1 - Interativo
(Como usar esta página para seus estudos)

“Seletores estão entre as primeiras coisas que você aprende quando começa a estudar CSS. Sem dúvida os seletores fazem parte dos assuntos fundamentais das CSS, contudo poucos desenvolvedores sabem tirar proveito de todo o seu potencial. Ainda que você possa fazer muitas estilizações com os seletores do tipo ID e os seletores de classes, há muito mais a fazer com seletores.
O conhecimento de como usar adequadamente todas as variantes de seletores disponíveis em CSS 2.1 irá ajudá-lo na tarefa de manter seu HTML bem mais claro.”

Eu traduzi para o português o excelente artigo “CSS 2.1 selectors” escrito por Roger Joansson, onde o autor explica detalhadamente os seletores CSS disponíveis. Confira o artigo traduzido.

Inspirado naquela tradução desenvolvi esta página interativa para você estudar os seletores e verificar por si mesmo o seguinte:

1. type selectors (seletor tipo)- casa com qualquer ocorrência de um determinado tipo de elemento no documento;
2. class selectors (seletor classe)- casa com o elemento, baseado no seu atributo class;
3. id selectors (seletor id)- casa com o elemento, baseado no seu atributoid;
4. universal selectors (seletor universal)- casa com todos os elementos do documento;
5. contextual selectors (seletor contextual) ou combined selectors (seletor combinado) - dois ou mais seletores simples separados por um elemento de combinação (“espaço em branco ”, “+”, “>”);
   1. descendant selectors (seletor descendente) - Um seletor descendente da forma "A B" casa com o elemento B que seja descendente do elemento A;
   2. child selectors (seletor filho) - Casa com o elemento filho de um determinado elemento. É formado por dois ou mais seletores simples separados por um sinal “>”;
   3. adjacent sibling selectors (seletor irmão adjacente) - Seletor adjacente tem a seguinte sintaxe: E1 + E2. Casa o elemento E2 se E1 e E2 forem filhos do mesmo pai e E2 esteja colocado imediatamente após E1, no documento.
6. grouped selectors (seletores grupados) - diversos seletores separados por vírgula compartilham de uma regra comum;
7. attribute selectors (seletor de atributo) - casa com elementos que possuem um determinado atributo declarado no código do documento;
8. pseudo-class seletor (pseudo-classe) e pseudo-element selectors (seletor pseudo-elemento) - casa com elementos baseado no valor declarado para determinado atributo.

Como interagir com esta página

No quadro à direita existe um documento dentro de uma DIV denominada #frame onde o(s) elemento(s) casado(s) pelo seletor que você escolher aparecerão em destaque (na cor amarela).

Este documento está dividido em três seções:

1. Um cabeçalho cuja ID é #header
2. Uma barra de navegação cuja ID é #nav
3. Uma seção principal cuja ID é #main

O conteúdo do documento revela sua estrutura HTML. Assim ao escolher um seletor você não precisará olhar o código fonte para localizá-lo, pois o próprio texto do documento indica onde ele está.

Os parágrafos foram nomeados de:
¶ #1) até ¶ #12) apenas para referências e localização.

No quadro à esquerda e a partir de cima, existe um campo select para escolha de um seletor em uma lista pré-definida, um campo de texto para digitar um seletor que não conste da lista acima, um campo para mostrar a regra CSS padrão aplicada ao seletor.
Tente agora uma escolha na lista do campo select para ver como funciona.

No campo para digitar um seletor você pode escolher um selector, uma pseudo-class ou um pseudo-element para casar com um elemento que exista no quadro à direita .

Tente isso

A seguir proponho alguns desafios à você:

1. É possível escolher um seletor que case somente a primeira ocorrência do elemento <span> dentro do parágrafo #10 ?;
2. Qual é seletor que casa a coluna header 4 na tabela ?;
3. Quantos e quais seletores você encontrou, capazes de casar ao mesmo tempo os três elementos ems dentro do parágrafo #10 ?;
4. Qual seletor CSS é capaz de conferir a existência do atributo alt para a imagem da seção #header;

Alerta aos usuários do Internet Explorer

Alguns seletores não funcionam no IE6 e anteriores. Se você usa este navegador, confira uma lista dos seletores que não são reconhecidos no final deste tutorial no cabeçalho "Problemas com o Internet Explorer" .

<h1>Seletores CSS </h1>