Construindo seletores CSS

Seletores CSS são uma forma de escolher pedaços da página para poder trabalhar. O CSS é uma linguagem pensada para aplicar estilos, como trocar a cor de um texto. Mas os seletores são usados também para construir conteúdo dinâmico com jQuery ou procurar dados em páginas web usando lxml. Existem outros usos, com certeza, que eu desconheço.

Como faz? Primeiro você precisa saber um pouco de HTML. É uma linguagem muito simples, considere que um email tem três pedaços: um cabeçalho (o assunto), um trecho que você está respondendo, e alguns parágrafos da sua resposta. Em eles seriam "marcados" assim:

<h1>Texto legal que eu peguei do veganipsum.com</h1>

<blockquote>Golden samphire, garden rocket - sea kale eggplant; tinda spring onion welsh onion canna urad bean, aubergine. Chinese cabbage lagos bologi velvet bean, carrot scorzonera yardlong bean celery burdock prussian asparagus ginger, ahipa dolichos bean mooli. Corn salad, taro sea kale celeriac water chestnut golden samphire, chickpea leaves summer purslane sea kale. Komatsuna, salsify taro, ginger napa cabbage burdock tinda chickweed. Wild leek american groundnut watercress. Kuka drumstick prussian asparagus.</blockquote>

<p>Komatsuna soybean elephant garlic ginger; onion miner's lettuce elephant foot yam squash. Brinjal, squash pea sprouts catsear yarrow garden rocket cauliflower shallot welsh onion. Water spinach lizard's tail broccoli rabe, chickweed swede broadleaf arrowhead; chicory sorrel polk; canna. Sweet corn aka corn; aka maize bamboo shoot cress turnip dolichos bean spinach epazote earthnut pea. Canna, lentil pignut. Guar squash, sea kale garlic.</p>

<p class="signature">Runner bean cabbage florence fennel ginger horseradish zucchini, taro. Celtuce lizard's tail, asparagus winter purslane shallot chicory paracress salsify, cucumber. Lamb's lettuce sierra leone bologi swede.</p>

Reparou que logo antes do assunto tem um <h1> e logo depois tem um um </h1>? Isso é marcação. É assim que o navegador e qualquer outro programa sabe que esse texto é um título. O mesmo vale para o que está entre <p> e </p>, marcando o que é um parágrafo, ou entre <blockquote> e </blockquote> marcando que o texto é uma citação.

E no último parágrafo, tem um class="signature". Como <signature> não existe no dicionário do HTML, eu resolvi indicar que esse parágrafo em especial é a assinatura.

O seletor vai se aproveitar disso. Em CSS, os seletores são seguidos de propriedades entre chaves. Pra não ficar falando grego, vou mostrar um exemplo:

a { color: red; }

.title { color: green; }

#footer { background-color: pink; }

#footer a { color: blue; font-size: 2em; }

O melhor jeito de testar isto é usando o Chrome com a extensão Stylebot. Clique com o botão direito na página (em qualquer lugar) e escolha STYLEBOT -> STYLE ELEMENTS. Na barra lateral que abrir, procure o botão EDIT CSS que está lá embaixo. Cole o código CSS acima no campo de texto que aparecer, e marque o LIVE PREVIEW pra ver o que ele faz.

A primeira linha seleciona todos os elementos do tipo <a>, isto é, links. Em seguida os colore de vermelho. O seletor é simplesmente a. Fácil. O segundo seletor, .title, seleciona todos os elementos que tenham a classe title. Nem todos os sites vão ter um elemento com a classe title, mas você pode usar o meu tumblr como exercício, os seletores foram montados nele. O terceiro seletor, #footer, pega todos os elementos com a id footer. ID é parecido com classe, mas é pensado pra ser único — só deve ter um footer nessa página. Se houver dois, muitos programas vão pegar só o primeiro.

Por fim, o último seletor combina dois seletores pequenos. Leia da direita pra esquerda: o seletor #footer a pega todos os a (links) que estejam dentro do #footer (elementos com id footer). O efeito, no meu tumblr, você vê nos links lá embaixo, no rodapé.

Esses são os seletores fundamentais: elemento, .classe e #id. E o combinador fundamental é esse que permite selecionar dentro de outras seleções, com um simples espaço. Existem mais seletores, e você pode aprender mais sobre eles com o MauJor, mas eu aconselho brincar bastante com estes fundamentais e o Stylebot.

OBS: se você quer ver o HTML de alguma coisa pra procurar elementos, classes e ids pros seus seletores, você pode clicar com o botão direito no que quiser e escolher INSPECIONAR ELEMENTO (no chrome). Se você prefere o Firefox, experimente com o Firebug e o Firefinder.