Como usar novos seletores css3
CSS3 suporta vários novos seletores com novos recursos interessantes que você deve se familiarizar com. Você pode usar esses novos recursos para melhorar as páginas em ainda melhores maneiras do que antes.
Conteúdo
seleção de atributos
Agora você pode aplicar um estilo a qualquer elemento com um valor de atributo específico. Por exemplo, a entrada tag assume formas diferentes, todos determinados pela tipo atributo. Se você aplicar um único estilo para o entrada elemento, esse estilo é aplicado a muitos tipos diferentes de elementos: as caixas de seleção, campos de texto e botões de rádio. Usando a nova sintaxe de atributo, você pode aplicar um estilo a qualquer elemento de entrada:
Video: 1 Tutorial Jquery - Como Instalar/Utilizar Jquery
input [type ="texto"] {Background-color: # CCCCFF-}Você pode aplicar o estilo com ou sem um tipo de tag, mas é possível ter efeitos colaterais inesperados se você escolher um atributo extremamente comum.
não
Há momentos em que você quer uma seleção inversa. Por exemplo, imagine que você queria aplicar um estilo a todos os parágrafos que não são membros da especial classe:
p: não (.Especial) {fronteira: 1 px red- sólido}nth-child
o nth-child selector permite selecionar um ou mais elementos de um grupo. A versão básica usa uma entrada numérica:
#myListgt; li: enésimo-criança (1) {fronteira: azul- sólido 1px}Isso permite que você aplicar um estilo para o primeiro de um grupo de elementos. No exemplo, há uma lista com quatro itens. O estilo é aplicado aos itens da lista, não a lista.
O valor numérico pode, na verdade, ser uma fórmula, como An + b. Se você gosta de álgebra (e quem não), você pode selecionar todos os elementos de número par como este:
#myListgt; li: enésimo-criança (2n) {fronteira: 1 px azul- sólido}Uma fórmula semelhante pode ser utilizado para escolher as crianças ímpares.
#myListgt; li: enésimo-criança (2n + 1) {fronteira: 1 px azul- sólido}Você pode usar este sistema fórmula para obter todos os tipos de agrupamentos, mas a maioria das pessoas simplesmente precisam de um elemento particular, ou todas as linhas pares ou ímpares. suprimentos CSS3 atalho palavras-chave, até e ímpar, assim você não tem que fazer isso usando a matemática:
Video: Tutorial de CSS - Seletores do CSS3
#myListgt; li: nth-child (mesmo) {color: white-background-color: vermelhos}A palavra-chave permite que você escolha o último elemento de um grupo. Há algumas mais variações desta técnica de seleção:
Video: CSS3, Seletor universal, Seletor tipo, Seletor atributo
: Nth-last-child (N): Funciona como nth-child, excepto as contagens a partir do fim do grupo de elementos em vez de no início.
:enésimo-de-tipo (N): Este seletor funciona como nth-child , exceto que filtra a um tipo específico e ignora quaisquer elementos que não são exatamente o mesmo tipo de elemento.
last-child: Este (naturalmente) seleciona o último elemento filho.
última enésimo-de-tipo (N): funciona como enésimo-de-tipo, mas a partir do fim do grupo.
primeiro filho: Agarra o primeiro elemento (tecnicamente esta estava disponível em CSS2, mas raramente foi utilizado).
Estas ferramentas de seleção são totalmente suportados em todos os browsers recentes. No entanto, como eles são geralmente utilizados simplesmente para melhorar a legibilidade, deve ser seguro para usá-los. navegadores mais antigos simplesmente ignorar o estilo.
Outros pseudo-classes novas
Pseudo-classes permitem especificar estilos com base no estado de um elemento. CSS moderna suporta um número de novas pseudo-classes:
Video: Como hacer un menú de navegación desplegable con Animaciones CSS3
:flutuar: o :flutuar pseudo-classe tem sido uma parte de CSS desde o início, mas foi oficialmente definida apenas para o tag. Agora o :flutuar pseudo-classe pode ser aplicado a qualquer elemento. Se o mouse está sobre um elemento, esse elemento tem o estado ativado. Note-se que os dispositivos móveis não apoiar sempre porque a posição do dispositivo apontador não é conhecido até que o item é ativado.
:foco: o :foco pseudo-classe é activada quando um elemento está pronto para receber a entrada do teclado.
:ativo: Um elemento de formulário está ativo quando ele está sendo usado: por exemplo, quando um botão foi pressionado, mas ainda não liberados. dispositivos móveis, muitas vezes saltar directamente para o modo ativo, sem passar por flutuar modo. Esta pode ser uma importante consideração de design ao usar estado de styling.
As pseudo-classes de estado são totalmente suportados por todos os navegadores modernos, exceto a família IE de browsers. Há um apoio limitado, mas buggy até mesmo as primeiras versões do IE.