O que são selectores CSS? (Parte I)

Na actualidade, a quantidade de páginas web que utilizam CSS é massiva, sendo que atualmente milhares e milhares de pessoas utilizam o CSS para estilizar suas páginas e blogs. Desde desenvolvedores a blogueiros, passando por meros curiosos, o CSS é hoje uma linguagem de programação amplamente conhecida e utilizada na internet. Nos dias de hoje já não há desculpa para não utilizar CSS nas suas produções básicas! Neste artigo vamos abordar 3 tipos de selectores em CSS – Os Type Selectors, Class Selectors e ID Selectors – e você vai ficar a saber direitinho como os usar e como tirar o maior proveito da utilização dos mesmos em O que são selectores CSS? Parte I

Esta é a primeira parte de uma série de artigos, pelo que se tiver ideias ou sugestões, participe e deixe o seu comentário! Se desejar, poderá subscrever a nossa newsletter gratuita e receber os próximos conteúdos diretamente na sua caixa de email:

Como vimos no artigo Começando com CSS – Dê os primeiros passos em segurança, os selectores no exemplo acima são h1 e h2. Vamos agora explicar quais os selectores mais utilizados em CSS.

1. TYPE SELECTORS

Os Type Selectors são a forma mais simples de um selector, que é aquele que apresentámos anteriormente. Você ao dar um nome a um elemento HTML, pode-lhe aplicar um estilo ao longo de todo o documento, cada vez que esse elemento aparecer. Então, os Type Selectores são frequentemente utilizados para estilizar os elementos básicos que irão aparecer frequentemente no website, como os parágrafos. No exemplo a seguir, vamos estar a aplicar uma determinada estilização aos parágrafos:

p {
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 1em;
    color: #000000;
}

Neste exemplo determinámos qual será o tipo de letra, o tamanho e a cor dos parágrafos

2. CLASS SELECTORS

O processo de determinar quais os estilos a aplicar nos elementos é bastante simples, mas e se você necessitar de aplicar uma estilização diferente a um elemento que já tem uma estilização definida? Utilizando as classes! Uma classe é como se fossem criados sub-elementos dentro dos elementos. Isto é especialmente útil em variadíssimos casos, mas vamos focar a nossa atenção entre a área de conteúdos e a barra lateral do seu blog. Enquanto que você pretende ter os parágrafos com a cor preta na área de conteúdos, poderá pretender ter a cor branca na barra lateral. Então, para definir essa classe utilizamos a seguinte sintaxe:

p {
    color: #000000;
}
.barralateral {
    color: #FFFFFF;
}

Para diferenciar os elementos das classes, utiliza-se o ponto (.) – assim será interpretado como um classe e não como um elemento. Então desta forma você poderá aplicar a estilização destinada aos parágrafos da barra lateral. Para o fazer siga o exemplo abaixo:

<p class="barralateral">Este texto será formatado de acordo com a classe "barralateral".</p>

Apesar de estarmos a utilizar a classe para os parágrafos, ela pode ser aplicada em outros elementos, como links. Se você introduzir um link na barra lateral, ele ia ser processado como seria em qualquer parte do seu website. Então, se não quer ter uma diferenciação de cores, aplique a classe ao elemento:

<p class="sidebar"> Este texto será formatado de acordo com a classe "barralateral", enquanto que o <a href="www.escolacriatividade.com">link1</a> não será, e o <a class="barralateral" href="www.escolacriatividade.com">link2</a> será.</p>

Se quiser ir mais longe e pretender diferenciar os links, aplicando por exemplo negrito, terá de definir alguma estilização primeiro:

p {
    color: #000000;
}

.barralateral {
    color: #FFFFFF;
}

a.sidebar:link, a.sidebar:visited {
    font-weight: bold;
}

Aqui fizémos uma combinação entre um Type Selector e um Class Selector, utilizando 2 pseudo-classes (que iremos explicar mais à frente) link e visited. Assim, você iria ter o texto a branco, e os links a branco e negrito. De notar que se você introduzir cor onde definimos o negritos para os links, o texto irá assumir essa cor, pois CSS dá mais importância quanto mais específica for a estilização – neste caso estamos a ser bastante específicos ao querer que os links fiquem a negrito, mesmo depois de clicados.

3. ID SELECTORS

Os ID Selectors são usados para seleccionar um elemento em particular. Quer isto dizer que você poderá utilizar os ID Selectors para estilizar o mesmo elemento de formas diferentes:

<p id="para2"> Este parágrafo irá ser estilizado de acordo com o ID Selector "para2"</p>

Para definir a estilização do ID “para2″ fazemos o seguinte:

#para2 {
    color: #FF0066
}

Os ID Selectores podem também ser utilizados em combinação com outros tipos de selectores:

#para2 .adicional {
    font-weight: bold;
    color: #FF0066
}

Aqui fizemos uma combinação entre um ID Selector e um Class Selector, e desta forma sempre que aparecer um elemento com a classe “adicional” nos parágrafos com a ID “para2″ irão ser estilizados de acordo com o especificado.

Não perca a continuação deste artigo, e subscreva a nossa newsletter gratuita e receba os próximos conteúdos diretamente na sua caixa de email:

Abraços e até já!