Seletores em CSS

O CSS atinge a formatação do código de forma bem abrangente e modular e isto é feito através dos seletores CSS, estes por sua vez nos permite selecionar diversos trechos de código e aplicar estilos a eles. Neste post veja Seletores em CSS.

Isto é feito através de um conceito simples aonde utilizamos alguns pontos chaves do HTML, como âncora para estipular os estilos. Veja:

        <div class="teste1">Qualquer texto aqui.</div>
	<p class="teste1">Qualquer texto</p>
	<span class="teste2">Qualquer texto.</span>
	  
	//atribui um estilo a todas as tags que tiverem o valor "teste1" no atributo class 
	.teste1 {propriedade: valor}  
      
	//atribui um estilo a todas as tags <span> que tiverem o valor "teste2" no atributo</span>
	class  
	span.teste2 {propriedade: valor}

	<style type="text/css">  
	#divDireita
	{  
		float: rightright;  
		width: 200px;  
		padding: 3px;  
		border: 1px solid;  
		text-align: center;  
	}  
	</style>
	<div id="divDireita">
	Texto modificado pela seleção por ID 

Através da # conseguimos identificar o objeto HTML (<div>) através do ID que atribuímos para ele, este seletor é muito útil, porém um ID é único em uma página HTML, podendo repetir apenas em outras páginas, portanto é recomendável que sua utilização seja apenas em elementos chave do layout, aonde teremos certeza que o comportamento daquele elemento será o mesmo em todas as páginas.

Existe também o seletor por tag que é também um seletor chave, servindo para determinar um comportamento genérico para cada elemento HTML de um site, ajustando por exemplo o comportamento de todos os parágrafos de um texto:

<style type="text/css">
   p { line-height: 20px; }  
</style> 
<p>    	 
Aqui temos o texto modificado pela seleção por TAG, porém neste exemplo 
precisamos de um texto maior para visualizarmos a quebra de linha e vermos o espaçamento entre cada linha.  
</p>

Um outro tipo de seletor são os de classe que são, com certeza, os mais úteis para o dia a dia do designer, servindo para múltiplas ocasiões e principalmente modularização do código CSS e HTML, facilitando assim a manutenção do site em questão, vejamos abaixo como funciona este seletor.

        <style type="text/css">  
		.negrito {  
			font-weight: bold;  
		}  
		.sublinhado {  
			text-decoration: underline;  
		}  
		.italico {  
			font-style: italic;  
		}  
	</style> 
      
	<p> 
	 Aqui <font class="negrito">temos o texto modificado</font> pela seleção
	<font class="negrito italico">por TAG, porém</font>
	este exemplo <font class="negrito sublinhado">precisamos</font> de um 
	<font class="negrito italico sublinhado">texto maior para</font> 
	visualizarmos a quebra de linha e <font class="italico">vermos o espaçamento
	</font> entre cada linha.  
	</p>

O exemplo cima mostra todo o poder do uso da classe e quão versátil é este seletor, podendo ser repetido em diversas tags e em uma tag podem ser utilizados diversas classes, o exemplo abaixo resultará no seguinte:

“Aqui temos o texto modificado pela seleção por TAG, porém este exemplo precisamos de um texto maior para visualizarmos a quebra de linha e vermos o espaçamento entre cada linha.”

Esta solução é muito prática servindo não só para textos mas para diversos elementos do seu site, facilitando a organização dos elementos repetitivos ou até mesmo dos comportamentos que se repetem durante todo o site.

Como podemos ver é bastante simples utilizar os seletores no CSS porém tenha cuidado, uma decisão errada na hora de escolher qual seletor utilizar pode atrasar bastante seu projeto, portanto recomendo que estude todas as páginas do seu site antes de iniciar a implementação. 

Pseudo-classes e pseudo-elementos em CSS

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: css | seletores