Neste artigo, falaremos sobre seletores básicos do CSS, onde iremos discutir uma prática simples, mas muito importante para estilização do HTML, 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
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:
<body>
<p>Meu primeiro paragrafo</p>
</body>
Código CSS:
p {
color: blue;
}
No exemplo anterior utilizamos a tag <p> para exemplificar o uso do seletor de tag do CSS, porém se houver mais de uma tag <p> 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:
<body>
<h1>TreinaWeb</h1>
<p>Escola online para desenvolvedores</p>
<a>Caminhe do zero ao mercado de trabalho</a>
</body>
Código 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:
<body>
<div id="first">TreinaWeb</div>
</body>
Código 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:
<body>
<div class="first">TreinaWeb</div>
</body>
Código 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:
<body>
<div class="first">
<p>TreinaWeb</p>
</div>
<div>
<p>Avmakers</p>
</div>
</body>
Código 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.
