WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Como utilizar o pseudo seletor :nth-of-type?

Publicidade

Como usar o pseudo seletor :nth-of-type?

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;
}
exe1.png

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;
}
exe2.png

Fácil né? Podemos utilizar de diversas formas, vamos ao último exemplo.

E se eu quiser selecionar de 3 em 3 itens?
Podemos utilizar o mesmo HTML do nosso primeiro exemplo e aplicar a seguinte configuração em nosso CSS:

p:nth-of-type(3n){
   background-color: goldenrod;
}

Assim ele irá contar 3 itens e vai selecionar múltiplos de 3.

exe3.png

Faça outros testes com mais itens em lista, altere os valores e divirta-se com a lista zebrada.

Veja também: Introdução básica ao CSS Grid

Publicidade
Postado por: Igor Dias
Web Designer / Frontend Senior 

 

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]