Selecionar Elementos Específicos
Olá! Quando queremos selecionar apenas alguns elementos específicos de um menu, por exemplo, não é necessário criar uma nova div apenas para os elementos que você quer manipular.
Com a ajuda de uma pseudo-classe do tipo seletor, podemos selecionar apenas os elementos que queremos alterar.
Exemplo
No primeiro exemplo, temos uma div chamada .menu1, onde queremos selecionar apenas os links pares.
Lembrando que, por se tratar de links, utilizei a pseudo-class .menu1 a para que apenas os links desta div sejam manipulados, e não a div como um todo.
O código abaixo representa a div em que os links se encontrarão.
.menu1 {width:300px; height:auto; padding:5px; }
A parte abaixo representa apenas os links desta div, para isso utilizamos a letra a depois do nome da mesma.
.menu1 a {width:20px; height:20px; line-height:20px; padding:5px; margin:1px; background:#F4CCCC; display:inline-block; -moz-transition:0.5s ease-in; -webkit-transition:0.3s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in; color:#fff;}
O código abaixo representa os links pares.
.menu1 a:nth-child(even) {background:#e17e66;}
O código abaixo refere-se ao hover de todos os links.
.menu1 a:hover {opacity:.7}
Código inteiro:
.menu1 {width:300px; height:auto; padding:5px; } .menu1 a {width:20px; height:20px; line-height:20px; padding:5px; margin:1px; background:#F4CCCC; display:inline-block; -moz-transition:0.5s ease-in; -webkit-transition:0.3s ease-in; -o-transition:0.5s ease-in; transition:0.5s ease-in; color:#fff;} .menu1 a:nth-child(even) {background:#e17e66;} .menu1 a:hover {opacity:.7}
Existem códigos para cada seleção:
Elementos Pares
.div:nth-child(even)
Elementos Ímpares
.div:nth-child(odd)
Primeiro Elemento
.div:first-child
Último Elemento
.div:last-child
Elemento N
.div:nth-child(n)
Três Primeiros Elementos
.div:nth-child(-n+3)
Três Últimos Elementos
.div:nth-last-child(-n+3)
Espero que seja útil!
