Truques de como selecionar o n-ésimo item com CSS usando a pseudo-classe :nth-child \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 07 Horas 13 Min 13 Seg Tempo restante da oferta: 07 13 13 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Truques de como selecionar o n-ésimo item com CSS usando a pseudo-classe :nth-child [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Truques de como selecionar o n-ésimo item com CSS usando a pseudo-classe :nth-child Veja como selecionar um ou mais elementos em um grupo de elementos usando a pseudo-classe :nth-child. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 8 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/01113921/1.png) Olá, Web Developers! Quando estamos trabalhando com CSS, pode haver momentos em que a gente irá precisar selecionar um ou mais elementos em um grupo de elementos. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) Pode ser que você queira selecionar todos os elementos pares, um elemento a cada três ou todos após o quarto elemento. Para isso podemos usar a pseudo-classe `:nth-child`. [ ![C# (C Sharp) - Introdução ao ASP.NET Core](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/csharp.svg) Curso C# (C Sharp) - Introdução ao ASP.NET Core Conhecer o curso ](https://www.treinaweb.com.br/curso/csharp-avancado-introducao-ao-aspnet-core) Como base utilizaremos o seguinte HTML e CSS: ```html ``` ```css ul{ list-style-type: none; display: flex; justify-content: center; margin: 0; padding: 0; } li{ width: 50px; height: 50px; background-color: gray; border-radius: 100%; } ``` E teremos o seguinte resultado: Agora utilizaremos o `nth-child` para selecionar os ``. ## Selecionar apenas o nº elemento Para selecionar um elemento em um grupo, basta passarmos para o `nth-child` a posição desse elemento. **Exemplo:** selecionar 5º elemento. ```css li:nth-child(5) { background-color: red; } ``` ## Selecionar todos após o nº elemento Para selecionar todos após um determinado elemento, basta passar `n +` e o número do elemento a partir do qual você quer selecionar. **Exemplo:** selecionar todos a partir do 5º elemento (inclusive). ```css li:nth-child(n + 5) { background-color: red; } ``` ## Selecionar os primeiros n elementos Para selecionar os primeiros n elementos, basta fazer igual ao exemplo anterior, mas deixamos o `n` negativo. **Exemplo:** selecionar os primeiros 5 elementos. ```css li:nth-child(-n + 5) { background-color: red; } ``` ## Selecionar um a cada n elementos a partir do primeiro Para selecionar um a cada n elementos, basta multiplicar este número a `n`. **Exemplo:** selecionar um elemento a cada 3. ```css li:nth-child(3n + 1) { background-color: red; } ``` A explicação dessa seleção é imaginar que o `n` assume vários valores, e como estamos multiplicando por 3 e somando com 1, teremos: ``` **(3n) + 1** (3 x 0) + 1 = 1 (seleciona o 1º elemento) (3 x 1) + 1 = 4 (seleciona o 4º elemento) (3 x 2) + 1 = 7 (seleciona o 7º elemento) (3 x 3) + 1 = 10 (seleciona o 10º elemento) ``` Para selecionar a cada 2 elementos começando do primeiro, você pode indicar que quer selecionar os números ímpares. Então os seguintes códigos terão o mesmo resultado: ```css li:nth-child(2n + 1) { background-color: red; } li:nth-child(odd) { background-color: red; } ``` ## Selecionar um a cada n elementos (ignorando o primeiro) Mesmo que o anterior, mas não selecionaremos o primeiro elemento. **Exemplo:** selecionar um elemento a cada 3. ```css li:nth-child(3n) { background-color: red; } ``` Para selecionar a cada 2 elementos sem contar o primeiro, você pode indicar que quer selecionar os números pares. Então os seguintes códigos terão o mesmo resultado: ```css li:nth-child(2n) { background-color: red; } li:nth-child(even) { background-color: red; } ``` ## Selecionar um a cada n elementos a partir do nº elemento Mesmo que o anterior, mas indicamos quantos elementos queremos pular. **Exemplo:** selecionar um elemento a cada 3 a partir do 3º elemento. ```css li:nth-child(3n + 3) { background-color: red; } ``` ## Contando a partir do último elemento Além do `nth-child` também temos o `nth-last-child`, que podemos usar do mesmo modo como fizemos anteriormente. A diferença é que ele começa no último elemento. Para selecionar os últimos n elementos, basta fazer igual ao exemplo de selecionar os n primeiros elementos, mas usando o `nth-last-child` agora. **Exemplo:** selecionar os últimos 5 elementos. ```css li:nth-last-child(-n + 5) { background-color: red; } ``` [ ![IA Para Devs - Spec Driven Development](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/ia-para-devs.svg) Curso IA Para Devs - Spec Driven Development Conhecer o curso ](https://www.treinaweb.com.br/curso/ia-para-devs-spec-driven-development) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151507/TRUQUES-NPM-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 8 anos atrás ## [ 10 Truques do NPM - Você conhece todos? ](https://www.treinaweb.com.br/blog/10-truques-do-npm-voce-conhece-todos) Conheça simples truques que você pode fazer com o NPM. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/29063540/git-2-400x280.png) [ Git ](https://www.treinaweb.com.br/blog/categoria/git) 7 anos atrás ## [ Comandos do Git que você precisa conhecer - Parte 2 - Repositórios Remotos ](https://www.treinaweb.com.br/blog/comandos-do-git-que-voce-precisa-conhecer-parte-2-repositorios-remotos) Conheça comandos e truques do Git que facilitarão o seu trabalho ao lidar com repositórios remotos. Aprenda também a criar um repositório remoto em sua rede local. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/07/29063506/git-1-400x280.png) [ Git ](https://www.treinaweb.com.br/blog/categoria/git) 7 anos atrás ## [ Comandos do Git que você precisa conhecer - Parte 1 ](https://www.treinaweb.com.br/blog/comandos-do-git-que-voce-precisa-conhecer-parte-1) Domine o Git ao conhecer comandos e truques que facilitarão o seu trabalho. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/12/npm-voce-sabe-o-que-da-para-fazer-com-ele-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 6 anos atrás ## [ NPM - Você sabe o que dá para fazer com ele? ](https://www.treinaweb.com.br/blog/npm-voce-sabe-o-que-da-para-fazer-com-ele) Veja as várias possibilidades do que podemos fazer com o NPM. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/10/01105921/0-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 7 anos atrás ## [ Como crescer no Front-End? ](https://www.treinaweb.com.br/blog/como-crescer-no-front-end) Veja várias dicas para alavancar a sua carreira como Desenvolvedor Front-End Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151507/TRUQUES-NPM-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ O que é NPM e como usar uma biblioteca instalada por ele ](https://www.treinaweb.com.br/blog/o-que-e-npm-e-como-usar-uma-biblioteca-instalada-por-ele) Saiba o que é o NPM (Node Package Manager), como utilizar um pacote, framework ou biblioteca instalada por ele e sobre o package.json. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/functional-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 10 anos atrás ## [ Imutabilidade de objetos no PHP ](https://www.treinaweb.com.br/blog/imutabilidade-de-objetos-no-php) Imutabilidade é uma característica forte nas linguagens funcionais, onde a alteração de estado não é frequente e, quando ela acontece, é controlada. Veja como podemos ter objetos imutáveis no PHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/12/16065108/especialista-ou-generalista-400x280.png) [ Carreira ](https://www.treinaweb.com.br/blog/categoria/carreira) 8 anos atrás ## [ Ser especialista em algo ou saber um pouco de tudo? ](https://www.treinaweb.com.br/blog/ser-especialista-em-algo-ou-saber-um-pouco-de-tudo) Ser especialista ou saber um pouco de tudo? Veja qual caminho seguir em sua carreira. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/24173200/como-precificar-400x280.jpg) [ Marketing Digital ](https://www.treinaweb.com.br/blog/categoria/marketing-digital) 8 anos atrás ## [ Quanto cobrar? Como precificar um serviço de Desenvolvimento? ](https://www.treinaweb.com.br/blog/quanto-cobrar-como-precificar-um-servico-de-desenvolvimento) "Quanto eu cobro?" ou "Qual o preço do meu serviço?", essa é uma grande dor do desenvolvedor freelancer, home office e até mesmo escritórios estabelecidos de desenvolvimento. Neste artigo eu vou explicar a maneira que eu considero a melhor do mercado freelancer. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/SELETORES-BASICOS-CSS-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Seletores Básicos do CSS ](https://www.treinaweb.com.br/blog/seletores-basicos-do-css) Neste artigo, nós iremos aprender sobre seletores básicos do CSS e iremos estudar sobre os seletores de tag, classe e id. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/09/funcionalidades-do-jquery-com-a-api-nativa-do-javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ Funcionalidades do jQuery com a API nativa do JavaScript ](https://www.treinaweb.com.br/blog/funcionalidades-do-jquery-com-a-api-nativa-do-javascript) Nesse post veremos algumas das funcionalidades do jQuery que hoje podem ser aplicadas diretamente com a API nativa do JavaScript. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **07h 13min 13s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58