Uma olhada no Seletor Estrutural do Primeiro Tipo do CSS3
Uma coisa que eu adoro no CSS3 é a nova adição de seletores que nos permite segmentar elementos especificamente sem depender do classe, identidade ou outro atributo de elemento, e um que abordaremos aqui é o seguinte seletor, : primeiro do tipo.
o : primeiro do tipo O seletor segmentará o primeiro filho do elemento especificado, por exemplo, o snippet abaixo segmentará o primeiro h2 na página da web.
h2: declaração de estilo / * first-of-type * /
o : primeiro do tipo também é igual a : n-de-tipo (1), então, ao invés de selecionar apenas o primeiro do tipo, podemos selecionar ainda o segundo, o terceiro e assim por diante. O snippet a seguir terá como alvo o segundo h2 elemento na página da web.
h2: nth-of-type (2) / * declaração de estilo * /
: primeiro do tipo” vs. “:primeiro filho”
Pode parecer que esses dois seletores estão fazendo a mesma coisa, mas esse não é o caso. Vamos ver a seguinte demonstração:
Digamos que temos cinco elementos de parágrafos dentro de um div, como isso:
Parágrafo 1
Parágrafo 2
Artigo 3
Artigo 4
Artigo 5
Agora, gostaríamos de selecionar o primeiro parágrafo usando o :primeiro filho seletor.
p: primeiro filho padding: 5px 10px; raio de fronteira: 2px; fundo: # 8960a7; cor: #fff; borda: 1px sólido # 5b456a;
E como previmos, o primeiro parágrafo é selecionado com sucesso.
- : primeiro filho Demo
No entanto, quando nós adicione um elemento diferente antes o primeiro parágrafo, digamos um h1, como o trecho abaixo:
Cabeçallho 1
Parágrafo 1
Parágrafo 2
Artigo 3
Artigo 4
Artigo 5
o primeiro parágrafo não será selecionado, como a primeira criança dentro do div é não é mais um parágrafo, mas agora é um h1.
Então, esta é a situação em que o : primeiro do tipo seletor vem para resolver o problema.
p: first-of-type preenchimento: 5px 10px; raio de fronteira: 2px; plano de fundo: # a8b700; cor: #fff; borda: 1px sólido # 597500;
- : primeiro de tipo de demonstração
o “Último” Seletor
Onde há o “primeiro”, então também haverá o “último”.
O reverso dos dois seletores que discutimos acima são os dois seletores seguintes; a : último filho e a : last-of-type. Eles basicamente são os mesmos que os dois acima, exceto que eles visam o último filho do elemento especificado.
Por exemplo, esse snippet abaixo segmentará o último parágrafo dentro do div.
p: último filho padding: 5px 10px; raio de fronteira: 2px; fundo: # 8960a7; cor: #fff; borda: 1px sólido # 5b456a;
- : Demo do último filho
E esse snippet também terá como alvo o último parágrafo na mesma situação que discutimos acima; desta vez o é seguido diretamente por um elemento diferente.
p: last-of-type preenchimento: 5px 10px; raio de fronteira: 2px; plano de fundo: # a8b700; cor: #fff; borda: 1px sólido # 597500;
- : Demo do último tipo
O Selectivizr
Como qualquer outro novo recurso no CSS3, esses seletores não são suportados em navegadores antigos, principalmente Internet Explorer 6 a 8, com uma exceção para o :primeiro filho selector, como foi adicionado desde CSS2.1. Seu parente o : último filho foi adicionado apenas em CSS3.
Então, se todos esses seletores que mencionamos aqui forem realmente necessários para o seu site, você pode usar uma biblioteca JavaScript chamada Selectivizr para emular a funcionalidade do seletor CSS3.
O Selectivizr depende de outras Bibliotecas JavaScript para funcionar, como o jQuery, Dojo, Prototype e MooTools; e vendo na tabela de comparação no site oficial, o MooTools parece ser capaz de lidar com todos os seletores.
Então, vamos incluí-lo junto com o Selectivizr, como segue:
O comentário condicional acima garantirá que essas bibliotecas só serão carregadas no Internet Explorer 8 e abaixo.
Finalmente, você pode ver a demonstração nos links a seguir e agora deve funcionar tanto em navegadores modernos quanto antigos (IE8 e abaixo). Você também pode baixar o arquivo de origem para uma análise mais aprofundada. Apreciar.
- Demonstração
- Fonte de download
