Como trabalhar com seletores do estado em css3

Existem algumas situações em que o estado dinâmico de um objeto é importante para formatá-lo em CSS3. Usando seletores de estado pode ajudar um usuário determinar quando os objetivos foram alcançados ou uma característica particular não está disponível (o objeto é desativado).

Por exemplo, um objeto pode ter um link associado com ele e quando o usuário clica nesse link, o estado do link muda para “visitou”. A lista a seguir fala sobre seletores de estado que os documentos normalmente usam.

• :ligação: Seleciona todos os links não visitados em um documento.

  É prática comum para combinar seletores estaduais com seletores de tag. Por exemplo, você pode não querer formatar todos os links não visitados em um documento. O link para um tag provavelmente ser formatado de forma diferente a partir do link para um tag. Consequentemente, você normalmente ver seletores estaduais como a: link onde a formatação afetaria todos os links de âncora não visitados.

• :visitado: Seleciona todos os links visitados em um documento.

• :ativo: Seleciona o link que o usuário tenha selecionado.

• :vazio: Seleciona um objeto que não tem conteúdo.

• :alvo: Selecciona o alvo de um objecto. Por exemplo, quando o utilizador clica num link, o alvo de ligação que é seleccionado.

• :ativado: Seleciona qualquer objeto que está habilitado.

• :Desativado: Seleciona qualquer objeto que está desativado.

• :verificado: Seleciona qualquer objeto que está marcada.

• ::seleção: Seleciona o conteúdo que o usuário tenha destacado de alguma forma.

Video: Curso de CSS - Aula 5 (Classe, ID e Span)

seletores estaduais tornam possível alterar a aparência do documento para coincidir com as atividades que o usuário tenha realizado. O que isto significa é que o documento se torna mais interativo, sem a necessidade de qualquer codificação de sua parte. Este efeito é usado em uma série de exemplos que se seguem, então você vai ter muita prática trabalhar com seletores do estado. O procedimento que se segue mostra um método para trabalhar com selectores do estado.

1. criar o arquivos ExternalCSS.HTML e ExternalCSS.CSS e copiá-los para uma nova pasta.

2. Abrir ExternalCSS.HTML.

   Video: Universidade XTI - CSS - 07 - Pseudo Seletores - Parte1

3. Digite o seguinte código após o já existente

   
   
   
   

   marca no arquivo e salvar as alterações no disco.

   Selecione um
   Selecione Two
   1
   Dois

   Isso, somado código fornece alguns indicadores de estado para o exemplo. Ao clicar em um link, o alvo do link que muda de estado.

4. Abrir ExternalCSS.CSS.

5. Digite o seguinte código após os estilos existentes e salvar as alterações no disco.

   :: selecção {cor: blueviolet-cor de fundo: ameixa -} :: - Moz-selecção {cor: blueviolet-cor de fundo: ameixa -}: alvo {fronteira: sólido-fronteira de largura: forma-fronteira-cor: Red-background-color: BlanchedAlmond-}

   Observe o uso do prefácio -moz- especial para o selector de segunda :: seleção. Esta é uma das suas primeiras exposições a problemas de compatibilidade do navegador. A fim de fazer este trabalho seletor com Firefox, você deve adicionar esta segunda :: - seletor de Moz-seleção com o prefácio.

6. Atualizar a página de teste.

7. Selecione alguns dos primeiros texto do parágrafo.

   A cor do texto e sua mudança de fundo.

8. Clique em Selecionar um.

   O parágrafo contendo Uma muda a sua aparência.

   

9. Clique em Selecionar Two.

   O parágrafo contendo duas mudanças a sua aparência. O parágrafo que contém um retorna à sua aparência original.