Seletores avançados do CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 13 Horas 36 Min 21 Seg Tempo restante da oferta: 13 36 21 [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) Seletores avançados do CSS [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) # Seletores avançados do CSS Nesse artigo você irá entender alguns tipos de seletores pouco utilizados no CSS, porém extremamente úteis no desenvolvimento front-end. [ Amauri Blanco Corrêa ](https://www.treinaweb.com.br/blog/autor/amauri) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/seletores_avancados_do_css.png) Antes de tudo, precisamos entender o que são seletores. Seletores, são, de uma forma simplificada, uma maneira de pegar o elemento no HTML para podermos utilizá-lo no CSS. Se caso precise entrar mais afundo nessa parte mais básica dos seletores, recomendo a leitura do artigo [Seletores básicos do CSS](https://www.treinaweb.com.br/blog/seletores-basicos-do-css "Seletores básicos do CSS") que temos aqui no blog. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Seletor Combinadores Para exemplificar, irei utilizar as listas. Porém, a ideia é a mesma para qualquer outro tipo de tag do HTML. ```html Item 1 Item 2 Item 3 ``` Partindo dessa estrutura, vamos aos nossos exemplos de seletores avançados do CSS. ### Seletor CSS de descendentes Quando usamos esse tipo de seletor, o estilo será aplicado a qualquer elemento que for descendente do elemento previamente especificado, para utilizarmos esse seletor combinamos dois ou mais seletores utilizando um espaço em branco. ```css ul li { color: blue; } ``` No exemplo acima estamos utilizando o seletor descendente para informar que queremos estilizar todos os elementos `li` que estejam dentro de um elemento `ul`. O resultado ficará dessa forma: ![Exemplo de seletor de descendentes](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/seletor_de_descendentes.png) Podendo, também, ser utilizado de uma forma mais complexa, portanto, vamos ver outro exemplo. ```html Item 1 Item 2 Item 3 ``` Podemos, por exemplo, para estilizar as tags de `span`, fazer dessa forma: ```css ul li span { color: blue; } ``` ![exemplo de seletor de descentes complexo](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/seletor_de_descendentes_complexo.png) Dessa maneira, estamos estilizando todas as tags de `span` que estão dentro de `li`, que, está dentro de `ul`. [ ![HTML5 + CSS3 - Dominando o Flexbox](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Dominando o Flexbox Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-flexbox) ### Seletor CSS de filhos Para usar o seletor de filhos, utilizamos o caractere `>` (sinal de maior). Esse seletor avançado do CSS estiliza apenas os filhos diretos, ou seja, se o elemento estiver encapsulado em outra tag, não receberá a estilização. ```html item 1 item 2 item 3 item 4 ``` Nesse exemplo, estamos vendo que o `item 1` está na tag `a`, portanto, se fizermos da forma abaixo, o `item 1` não receberá a estilização. ```css ul > li { color: red; } ``` O resultado ficará dessa forma: ![Exemplo de seletor de filho](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/seletor_de_filhos.png) ### Seletor CSS gerais de irmãos Esse seletor, como nome já diz, seleciona os elementos de mesmo nível hierárquico, e ele utiliza o caractere `~` (sinal de til). Vamos ver um exemplo. ```html TreinaWeb Primeiro parágrafo Segundo parágrafo Terceiro parágrafo ``` ```css h2 ~ p { background-color: aquamarine; } ``` Baseado nessa estrutura acima, podemos entender que a estilização do CSS se aplicará apenas no primeiro e segundo parágrafo. Pois, o terceiro parágrafo não está no mesmo nível dos outros. ![Exemplo seletor gerais de irmaos](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/seletor_gerais_de_irmaos.png) ### Seletor CSS de irmãos adjacentes No caso desse seletor, nós usamos o caractere `+` (sinal de mais). Esse seletor irá pegar o primeiro elemento que ele encontrar, após isso aplicará a estilização. ```html Treinaweb Primeiro parágrafo Segundo parágrafo Terceiro parágrafo ``` ```css h2 + p { background-color: aquamarine; } ``` Nesse caso, apenas o primeiro parágrafo receberá a estilização. ![Exemplo de seletor de irmão adjacentes](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/seletor_de_irmao_adjacente.png) ## Pseudo-classes CSS Agora, entenderemos o que são as pseudo-classes. Pseudo-classes servem, principalmente, para se alterar um estado do elemento, como, quando o usuário passa o mouse pelo elemento, ou quando o elemento entra em foco, entre outras estilizações. Porém, nesse artigo, quero falar apenas das pseudo-classes que selecionem o elemento e que não alterem seu estado. Esse tipo de seletor pode ser usado de maneiras bem criativas. Podemos, por exemplo, trabalhar apenas com os elementos ímpares ou pares. ```html item 1 item 2 item 3 item 4 item 5 ``` Para criar um efeito apenas nos itens ímpares, basta, no CSS, fazer a seguinte declaração. ```css li:nth-child(odd) { background-color: grey; } ``` Dessa forma, apenas os itens, 1, 3 e 5 receberam a estilização. ![Exemplo de seleção apenas impares](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/pseudo_classe_impares.png) Para criar o mesmo efeito, porém nos itens pares, basta trocar o valor nos parênteses: ```css li:nth-child(even) background-color: grey; } ``` ![Exemplo de seletor apenas pares](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/pseudo_classe_pares.png) Com essas duas formas de uso do `nth-child`, podemos criar efeitos bem legais com tabelas, por exemplo. ![tabela exemplo uso exemplo nthchild](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/tabela_exemplo_uso_exemplo_nthchild.png) Além de par e ímpar, podemos usar o `nth-child` para se referir a qual elemento queremos estilizar em específico. Supondo que precisamos dar destaque para o `item 3`. Para não precisar criar classe, podemos usar o `nth-child(3)` dessa forma podemos dar uma estilização apenas para o item selecionado. ```css li:nth-child(3){ color: green; } ``` ![Exemplo de pseudo classe com seleção numérica](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/paseudo_classe_selecao_numerica.png) Similarmente, podemos pegar por número o elemento que queremos, podemos também, utilizar o primeiro filho ou último filho. Apenas usando `first-child` ou `last-child`, vamos ver esse exemplo. ```html item 1 item 2 item 3 item 4 item 5 ``` ```css li:first-child{ color: green; } ``` ![Exemplo pseudo classe primeiro filho](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/pseudo_classe_primeiro_filho.png) O exemplo acima, aplica a estilização somente para o `item 1`, pois, selecionamos apenas o primeiro filho de um `li`. Do mesmo modo, funciona para o último filho com o `last-child`. ```css li:last-child{ color: green; } ``` ![Exemplo pseudo classe último filho](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/pseudo_classe_ultimo_filho.png) [ ![HTML5 + CSS3 - Dominando o CSS Grid Layout](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Dominando o CSS Grid Layout Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-dominando-o-css-grid-layout) Podemos, por exemplo, usar o `:not()`. Ao usar esse seletor avançado do CSS, estamos selecionando o elemento que não possui alguma condição. Essa condição é passada nos parênteses. Vamos ver um exemplo. ```html item 1 item 2 item 3 item 4 item 5 ``` Neste exemplo, apenas o `item 2` possui uma classe. Com uso do `:not()` podemos aplicar um estilo com exceção do item que possui uma classe. Fica dessa forma: ```css li:not(.item-especial){ color: green; } ``` ![Exemplo de pseudo classe com not](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/pseudo_classe_not.png) ### Conclusão Em suma, podemos entender nos exemplos a cima, que existem várias outras opções de selecionar elementos HTML para estilizá-los no CSS. Certamente, precisamos entender o nosso projeto para saber qual melhor seletor utilizar em cada situação. Existem ainda outros tipos de pseudo-classes que podemos usar, porém, na grande maioria dos casos esses são os mais utilizados. Agora sabemos um pouco mais sobre os seletores avançados do CSS, um tópico extremamente importante. Nesse aprendemos um pouco mais sobre CSS conhecendo sobre os seus seletores avançados, caso queira aprender mais sobre CSS e também sobre HTML saiba que aqui na [TreinaWeb](https://www.treinaweb.com.br/) temos o curso [HTML5 e CSS3 - Desenvolvimento web Avançado](https://www.treinaweb.com.br/curso/desenvolvimento-web-com-html5-e-css3-avancado) que possui **02h32 de vídeos** e um total de **57 exercícios**. Conheça também outros [cursos de CSS](https://www.treinaweb.com.br/busca?q=CSS). [ ![Desenvolvedor Especialista Front-end](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Formação Desenvolvedor Especialista Front-end Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-especialista-front-end) Veja quais são os tópicos abordados no curso de HTML5 e CSS3 - Desenvolvimento web Avançado: - Canvas e SVG; - Drag & Drop; - Web Storage e App Cache para Aplicações Offline; - Leitura de Arquivos e Controle de Mídias; - Animações e Transições; - Layout com Flex Box; - Layouts Responsivos e Media Queries; - Pré Processadores CSS e HTML. - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML5 ](https://www.treinaweb.com.br/blog/tag/html5) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) - [ #CSS3 ](https://www.treinaweb.com.br/blog/tag/css3) - [ #Seletores CSS ](https://www.treinaweb.com.br/blog/tag/seletores-css) Autor ![Amauri Blanco Corrêa](//secure.gravatar.com/avatar/98d195107c5e3e8d91ee13c18f2a8f34?d=mm) ## Amauri Blanco Corrêa Sou formado em Análise e Desenvolvimento de Sistemas pela Universidade Cruzeiro do Sul, uma pessoa extremamente curiosa e dedicada, amo tecnologia e sempre busco aprender e aperfeiçoar meus conhecimentos. Atuo há mais de 3 anos como desenvolvedor e instrutor Front-end sou um eterno estudante do mundo da tecnologia. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/amauri) ## 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/2023/01/atributos-html-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Entendendo os atributos HTML ](https://www.treinaweb.com.br/blog/entendendo-os-atributos-html) No artigo de hoje, veremos algo que está muito presente no mundo da programação, atributos. Por que são tão importantes para o Front-End? Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/03/Metodologia-bem-organizando-seu-css-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Metodologia BEM: organizando seu CSS ](https://www.treinaweb.com.br/blog/metodologia-bem-organizando-seu-css) Melhore a qualidade do código CSS em seu projeto web com a Metodologia BEM. Aprenda como aplicá-la e aproveite seus benefícios. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/07/DICA-CODIGO-HTML-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Dica de Código: Conheça a propriedade CSS text-decoration ](https://www.treinaweb.com.br/blog/dica-de-codigo-conheca-a-propriedade-css-text-decoration) Descubra o poder da propriedade CSS text-decoration: estilos únicos para seus textos front-end! Explore posições, estilos e personalizações! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/GUIA-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Guia da linguagem CSS ](https://www.treinaweb.com.br/blog/guia-da-linguagem-css) Nesse guia completo veremos como funciona e quais as formas de criar estilizações com CSS, necessário para qualquer desenvolvedor front-end Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/03/CSS-SHORTHAND-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 3 anos atrás ## [ Entendendo o shorthand no CSS ](https://www.treinaweb.com.br/blog/entendendo-o-shorthand-no-css) Vamos aprender o que é shorthand no CSS, entender o conceito e aprender a deixar nossos estilos mais limpo e de fácil manutenção Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/POSITIONS-CSS-400x280.jpg) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Position, estilizando elementos com CSS. ](https://www.treinaweb.com.br/blog/position-estilizando-elementos-com-css) Neste artigo nos iremos aprender sobre position em elementos no CSS, e sua importância para estilizações das nossas páginas web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/06/PRE-PROCESSADORES-CSS-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Os Pré-Processadores CSS ](https://www.treinaweb.com.br/blog/os-pre-processadores-css) Nesse artigo veremos o que são, pra que servem e quais os pré-processadores CSS mais utilizados. Aprenda a dar super poderes ao CSS Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/07/unidades_de_medidas_no_css-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Unidades de medidas no CSS ](https://www.treinaweb.com.br/blog/unidades-de-medidas-no-css) Nesse artigo você irá entender de fato a diferença entre as várias opções de unidades medidas do CSS, como Rem, Em, %, Px, entre outras. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/01/Conhecendo_o_box_model-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Conhecendo o box model ](https://www.treinaweb.com.br/blog/conhecendo-o-box-model) Domine os fundamentos do CSS com o box model. Aprenda a controlar o layout e o espaçamento dos elementos para uma página da Web. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/08/Como-alterar-o-font-family-do-site-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Como alterar o font family do site ](https://www.treinaweb.com.br/blog/como-alterar-o-font-family-do-site) Nesse artigo veremos como você pode alterar o font family de seu site. Aprenderemos também as diferentes possibilidades de fazê-lo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/Como_criar_uma_modal_com_a_tag_dialog-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Como criar uma modal com a tag dialog ](https://www.treinaweb.com.br/blog/como-criar-uma-modal-com-a-tag-dialog) Domine modais em HTML com a tag 'dialog'. Crie, personalize e interaja em seu site. Torne-o envolvente e moderno! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/08/07161700/gerenciamento-python-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 4 anos atrás ## [ Empacotando e publicando pacotes Python no PyPi ](https://www.treinaweb.com.br/blog/empacotando-e-publicando-pacotes-python-no-pypi) Neste artigo iremos aprender como funciona o processo de empacotar e distribuir nossos próprios pacotes Python no PyPi. 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 **13h 36min 21s** - 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