Seletores Básicos do CSS \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 02 Horas 46 Min 33 Seg Tempo restante da oferta: 02 46 33 [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 Básicos do CSS [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) [ HTML ](https://www.treinaweb.com.br/blog/categoria/html) # Seletores Básicos 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. [ Redação Treinaweb ](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/SELETORES-BASICOS-CSS.png) Neste artigo, falaremos sobre seletores básicos do CSS, onde iremos discutir uma prática simples, mas muito importante para estilização do [HTML](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css), também aprenderemos como aplicar um seletor ao nosso documento, além de apresentar a forma certa de como e quando os seletores do CSS que utilizam **classe**, **tag** e **id** [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-HTML.jpg) ](https://www.treinaweb.com.br/ebook/guia-HTML/) ## Mas o que seria um seletor? Seletores do CSS são responsáveis por determinar quais elementos do HTML receberão estilização, ou seja, é um padrão que determina qual recurso será estilizado na sua página ou aplicação. Deixando-a mais atrativa e responsiva para as diferentes telas de visualização entre os mais diversos dispositivos de internet, como, tablets, smartphones e entre outros. ## Seletor de Tag Dentre os seletores do CSS posuimos o seletor de tab, neste seletor usamos a própria tag para estilizar o documento. Dessa forma, na seleção pode-se especificar em qual elemento será aplicada a regra de estilo definida. Código HTML: ```html Meu primeiro paragrafo ``` Código CSS: ```css p { color: blue; } ``` No exemplo anterior utilizamos a tag `` para exemplificar o uso do seletor de tag do CSS, porém se houver mais de uma tag `` no seu documento atribuir essa prática se torna um pouco limitada, pois a estilização será aplicada em todos os elementos de parágrafo do documento, dificultando casos onde queremos estilizar apenas um elemento específico. Porém, é possível realizar uma estilização em um elemento especifico mesmo com o seletor de tag, para isso é necessário atribuir um caminho pela tag usando a classe que deseja atribuir a propriedade. Falaremos sobre esse recurso posteriormente neste artigo na seção “Restrição do caminho da tag”. Agora iremos visualizar um novo exemplo de como usar uma mesma estilização em mais de uma tag: Código HTML: ```html TreinaWeb Escola online para desenvolvedores Caminhe do zero ao mercado de trabalho ``` Código CSS: ```css h1, p , a { color: blue; } ``` Veja no exemplo acima que somos capazes de selecionar múltiplos elementos para que seja aplicada uma mesma estilização nos mesmos, para isso basta que separemos os elementos que queremos aplicar a estilização com a vírgula. ## Seletor de id Neste próximo seletor básico, utiliza-se o próprio atributo global `id`, como identificador para estilizar o documento. Este seletor é utilizado, quando desejamos identificar um elemento específico no nosso documento, para sua representação no CSS atribuímos o “**\#**” (cerquilha). Código HTML: ```html TreinaWeb ``` Código CSS: ```css #first { color: blue; } ``` Mas devemos tomar muito cuidado ao utilizar o seletor de id, e ter um pensamento claro que seu uso é aconselhado em elementos específicos e únicos, como em âncoras no HTML ou para especificar uma parte exclusiva do seu código. ### Mas o que seria uma âncora? Âncoras são links criados na página, e que te levam para uma parte específica do conteúdo na mesma página. ## Seletor de Classe Neste último seletor básico, usamos o próprio atributo global `class` do HTML para estilizar o documento. Estas classes permitem ao CSS selecionar múltiplos elementos ao mesmo tempo, desde que os mesmos possuam a mesma classe. Consiste na seleção por meio do nome da classe definida como atributo e possui como símbolo no CSS o “**.**” (ponto final). Código HTML: ```html TreinaWeb ``` Código CSS: ```css .first { color: blue; } ``` ### Por que usar o seletor de classe ao invés de Tag ou ID? Dessa forma, podemos avaliar que os seletores de **classe**, podem se referir a mais de um elemento no seu documento. Enquanto o seletor de **id** é utilizado apenas em um elemento específico, assim, utilizando-o repetidas vezes, estará se distanciando do padrão adequado no desenvolvimento web. Já com o seletor de **tag**, ocorrerá modificações em todos os elementos em que aquela tag está atribuída, com a exceção de que se restrinja o caminho da tag. ### Restrição do caminho da tag por meio de um seletor Dessa forma, a estilização será atribuída apenas no elemento selecionado. Porém, será necessária a utilização de uma classe para especificar esse caminho. Código HTML: ```html TreinaWeb Avmakers ``` Código CSS: ```css .first p { color: blue; } ``` No exemplo acima, podemos observar que foi usada uma classe para restringir o caminho da tag, pois, essa seria a maneira mais simples de estilizar apenas uma tag especifica em nosso documento. ## Conclusão Agora que está claro o uso de seletores básicos de classe, tag e id. Conseguimos facilmente diferenciar a forma de usar cada um deles em nosso código CSS. Os seletores são de grande importância na criação de sites e páginas HTML. Pois, eles definem em quais elementos um conjunto de estilizações se aplica no nosso documento. - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) - [ #HTML ](https://www.treinaweb.com.br/blog/tag/html) Autor ![Redação Treinaweb](//secure.gravatar.com/avatar/662942287935c97e547cfc12c04be6e5?d=mm) ## Redação Treinaweb [Todos os artigos](https://www.treinaweb.com.br/blog/autor/redacao-treinaweb) ## 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/2022/08/seletores_avancados_do_css-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Seletores avançados do CSS ](https://www.treinaweb.com.br/blog/seletores-avancados-do-css) Nesse artigo você irá entender alguns tipos de seletores pouco utilizados no CSS, porém extremamente úteis no desenvolvimento front-end. 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/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/2022/08/MEDIA-QUERIES-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 4 anos atrás ## [ Media queries, o que são e como usar no CSS? ](https://www.treinaweb.com.br/blog/media-queries-o-que-sao-e-como-usar-no-css) Neste artigo, nós iremos aprender sobre o uso de media queries no CSS e iremos aprender como utilizá-los em nossas aplicações web. 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/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 - ![](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/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/2021/05/organizando-css-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ ITCSS - Organizando melhor o CSS ](https://www.treinaweb.com.br/blog/itcss-organizando-melhor-o-css) Você já teve dificuldade com a organização e escalabilidade do seu CSS? Veja como a arquitetura ITCSS pode te ajudar. 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 - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/12/13105826/clipboard-js-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ clipboard.js - Copiar e Colar com JavaScript ](https://www.treinaweb.com.br/blog/clipboard-js-copiar-e-colar-com-javascript) Aprenda a copiar textos para a área de transferência de forma simples e descomplicada com o clipboard.js. 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 **02h 46min 33s** - 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