Veja como utilizar o pseudo seletor :nth-of-type().
Publicidade
Vamos usar um exemplo básico de efeito zebra em uma lista de parágrafos. Nosso HTML ficará assim:
<p>Texto de exemplo, para exemplificar o conteúdo.</p>
<p>Texto de exemplo, para exemplificar o conteúdo.</p>
<p>Texto de exemplo, para exemplificar o conteúdo.</p>
<p>Texto de exemplo, para exemplificar o conteúdo.</p>
<p>Texto de exemplo, para exemplificar o conteúdo.</p>
No CSS aplique as seguintes configurações:
p{
display: block;
width: 100%;
border-radius:5px;
padding: 10px;
background-color: #eee;
margin-bottom: 10px;
color: #333;
}
Nosso páragrafo está estilizado com uma cor de fundo cinza. No efeito zebra, vamos aplicar uma cor amarela.
O pseudo seletor ":nth-of-type()" funciona da seguinte forma:
Para aplicar o efeito zebra em uma lista conforme nosso exemplo, basta declarar o elemento p seguido de :nth-of-type() no nosso arquivo CSS, veja como fica:
p:nth-of-type(){
background-color: goldenrod;
}
Porém para que o efeito zebra se aplique, basta acrescentar o valor "2n" dentro do parenteses conforme exemplo abaixo:
p:nth-of-type(2n){
background-color: goldenrod;
}
Veja como fica:
Pronto, o efeito zebra é simples e fácil de se aplicar.
Podemos utilizar o pseudo seletor de outra forma, por exemplo, e se quisermos selecionar apenas um item específico de nossa lista, como faríamos?
Por exemplo, quero selecionar apenas o item 3 da nossa lista de parágrafos, ficaria assim:
Nosso HTML com 5 itens:
<p>Texto de exemplo, para exemplificar o conteúdo.</p>
<p>Texto de exemplo, para exemplificar o conteúdo.</p>
<p>Texto de exemplo, para exemplificar o conteúdo.</p>
<p>Texto de exemplo, para exemplificar o conteúdo.</p>
<p>Texto de exemplo, para exemplificar o conteúdo.</p>
Nosso CSS, selecionando apenas o item 3, veja que colocamos apenas o número 3 entre parenteses, indicando que queremos selecionar apenas o item 3:
p:nth-of-type(3){
background-color: goldenrod;
}
Veja como fica:
Faça outros testes com mais itens em lista, altere os valores e divirta-se com a lista zebrada.
