Como usar New CSS3 Seletores

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.

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 digitar atributo. Se você aplicar um único estilo para o entrada elemento, esse estilo é aplicado a muitos tipos diferentes de elementos: 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:

 input [type = "text"] {background-color: # CCCCFF-}

Você pode aplicar o estilo com ou sem um tipo de etiqueta, mas é possível ter efeitos colaterais inesperados se você escolher um atributo extremamente comum.

image0.jpg

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) {border: 1px vermelhos sólida}

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:

 #myList> li: nth-child (1) {border: 1px solid azul-}

Isto permite-lhe aplicar um estilo a primeira de um grupo de elementos. No exemplo, existe 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 o an + b. Se você gosta de álgebra (e quem não), você pode selecionar todos os elementos de numeração par como este:

 #myList> li: nth-child (2n) {border: 1px azul- sólida}

Uma fórmula similar pode ser usado para escolher as crianças ímpares.

 #myList> li: nth-child (2n + 1) {border: 1px azul- sólida}

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 de 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:

 #myList> li: nth-child (mesmo) {color: white-background-color: red-}

A palavra-chave permite que você escolha o último elemento de um grupo. Há algumas mais variações desta técnica de seleção:

  • : 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.

  • :nth-of-type (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 nth-of-type (N): funciona como nth-of-type, 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 usadas simplesmente para melhorar a legibilidade, deve ser seguro para usá-los. navegadores mais antigos simplesmente ignorar o estilo.

image1.jpg

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:

  • :flutuar: o :flutuar pseudo-classe tem sido uma parte do 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 nem sempre suportam porque a posição do dispositivo apontador não é conhecido até que o item é activado.

  • :foco: o :foco pseudo-classe é ativado quando um elemento está pronto para receber 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. Os dispositivos móveis frequentemente saltar directamente para o modo ativo, sem passar por flutuar modo. Esta pode ser uma consideração importante do projeto ao usar estado de styling.

As pseudo-classes de estado são totalmente suportados por todos os navegadores modernos, exceto a família IE dos navegadores. Há um apoio limitado, mas buggy até mesmo as primeiras versões do IE.

Semelhante

menu