Propriedade do CSS: nth-child | keyframe – Comunicação Digital, Websites

Blog

Propriedade do CSS: nth-child

O CSS3 oferece quatro poderosas pseudo-classes que permitem que o programador de interfaces selecione vários elementos de acordo com suas posições em uma árvore do documento. Um exemplo desta aplicação é a famosa zebra em tabelas.  No início, o uso das pseudo-classes pode parecer um pouco complicado, mas é fácil quando você pegar o jeito da coisa. As pseudo-classes são:

  • :nth-child(N)
  • :nth-last-child(N)
  • :nth-of-type(N)
  • :nth-last-of-type(N)

O argumento, N , pode ser uma palavra chave, um número ou uma expressão numérica de forma a n + b .

Essas pseudo-classes aceitam  palavras-chave  para a seleção de elementos ímpares ou pares.

Vamos supor que o argumento N é um número ordinal 5, nesse caso quinto elemento será selecionado.

O argumento de N pode também ser administrado como um n + b , onde a e b são números inteiros (por exemplo, 3n + 1 ).

No exemplo acima, o número b representa a posição ordinal do primeiro elemento, e o número 1 representa o número ordinal de cada elemento que queremos corresponder.

Assim, o nosso exemplo de expressão 3n + 1 corresponderá ao primeiro elemento, e cada terceiro elemento depois que: o primeiro, quarto, sétimo, décimo, e assim por diante. A expressão 4n + 6 irá coincidir com o sexto elemento e cada quarto elemento depois disso: o sexto, décimo, décimo quarto, e assim por diante.

Se um e b são iguais, ou se b é igual a zero, b pode ser omitido. Por exemplo, as expressões 3n 3 e 3n 0 são equivalentes a 3n -se referem a cada terceiro elemento. O valor de palavra-chave ainda é equivalente à expressão 2n .

Se a é igual a 1 , pode ser omitido. Assim, por exemplo, 3 1n pode ser escrito como n +3 . Se um é zero, o que indica um padrão de não-repetição, apenas o elemento b é necessário para indicar a posição ordinal do único elemento que deseja corresponder. Por exemplo, a expressão 0n 5 é equivalente a 5 , e, como vimos acima, vai coincidir com o quinto elemento.

Tanto a e b podem ser negativos, mas os elementos só será encontrada se N tem um valor positivo. Se b é negativo, substitua o + sinal com um – sinal.

Se continua meio complicado, não se preocupe, repare a tabela abaixo acredito que ela vai ajudar a colocar as coisas mais claras. A expressão representa um conjunto linear número que é usado para combinar elementos. Assim, a primeira coluna da tabela representa os valores de n , e as outras colunas exibem os resultados para ( N ) de diferentes expressões de exemplo. A expressão irá corresponder se o resultado é positivo e existe um elemento nessa posição dentro da árvore do documento. Claro que é sempre interessante fazer os testes no próprio código.

Conjuntos de resultados para Expressões Pseudo-classe

Assim, a expressão 4n 1 irá coincidir com a primeira, quinta, nona, décima terceira, décima sétima, vinte e um, e assim por diante, se existirem elementos, enquanto a expressão 3-n vai combinar os elementos terceiro, segundo e primeiro só .

em breve daremos sequencia ao estudo das pseudo-classes.

fontes:

http://www.w3.org/TR/selectors/

http://www.w3schools.com/cssref/sel_nth-child.asp

http://reference.sitepoint.com/css/understandingnthchildexpressions

http://tableless.com.br/nth-child/

Este post tem 1 comentário

Deixe seu comentário