2. Pseudoclasses e pseudoelementos
A. Seletor descendente após :hover
Exemplo
| a:hover span { cor: #0f0; } |
descrever
Um elemento pode ser posicionado por um seletor seguindo a pseudoclasse :hover, assim como os seletores descendentes. O exemplo acima mudará a cor do texto no elemento span dentro do elemento a quando o mouse for passado.
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |
B. Pseudoclasse de cadeia
Exemplo
| a:primeiro filho:hover { cor: #0f0; } |
descrever
Pseudoclasses podem ser encadeadas para restringir a seleção de elementos. O exemplo acima localizará a primeira tag a em cada elemento pai e aplicará a pseudoclasse P hover a ela.
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |
C.: passe o mouse em elementos não âncora
Exemplo
| div:hover { cor: #f00; } |
descrever
A pseudoclasse :hover pode ser aplicada ao estado de foco de qualquer elemento, não apenas de tags.
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |
D.: pseudoclasse do primeiro filho
Exemplo
| div li:primeiro-filho { fundo: azul; } |
descrever
Altere a pseudoclasse para localizar o primeiro elemento filho do elemento pai de cada elemento especificado.
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |
Erros
No IE7, se houver um comentário HTML antes do primeiro elemento filho a ser posicionado, a pseudoclasse do primeiro filho será inválida.
E.: foco pseudo-classe
Exemplo
| a: foco { borda: 1px vermelho sólido; } |
descrever
Esta pseudoclasse localiza todos os elementos que possuem foco no teclado.
Status de suporte
| IE6 Não IE7Não IE8 Sim |
F.: antes e: depois das pseudoclasses
Exemplo
| #caixa:antes { content: "Este texto está na frente da caixa"; } #caixa:depois { content: "Este texto está atrás da caixa"; } |
descrever
Esses dois pseudoelementos adicionam o conteúdo gerado antes e depois do elemento especificado, respectivamente, e são usados junto com o atributo content.
Status de suporte
| IE6 Não IE7Não IE8 Sim |
3. Suporte de atributos
A. O tamanho real gerado pela posição
Exemplo
| #caixa { posição: absoluta; superior: 0; direita: 100px; esquerda: 0; inferior: 200px; fundo: azul; } |
descrever
Definir os valores superior, direito, inferior e esquerdo para um elemento absolutamente posicionado dará ao elemento seu tamanho real (largura e altura), embora nenhum valor de largura e altura seja definido.
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |
B. Altura mínima e largura mínima
Exemplo
| #caixa { altura mínima: 500px; largura mínima: 300px; } |
descrever
Essas duas propriedades especificam a largura e a altura mínimas do elemento respectivamente, permitindo que uma caixa seja maior que o valor mínimo especificado, mas não menor. Eles podem ser usados juntos ou separadamente.
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |
C. Altura máxima e largura máxima
Exemplo
| #caixa { altura máxima: 500px; largura máxima: 300px; } |
descrever
Essas duas propriedades especificam a altura e a largura máximas do elemento, respectivamente. Uma caixa pode ser menor que o valor máximo especificado, mas não maior. Eles também podem ser usados juntos ou individualmente.
Status de suporte
| IE6 Não IE7 Sim IE8 Sim |