Design
Introdução ao CSS
CSS 1
Seletores

CSS 1: Seletores#

Até agora, usamos o seletor mais simples possível: "todos os elementos com nome tal". Isso é suficiente para códigos HTML simples, mas é genérico demais conforme as necessidades visuais vão ficando mais complexas.

Vamos supor, por exemplo, que queremos uma pequena diferença visual entre os parágrafos: o primeiro deve ter uma margem de 50 pixels e um padding de 10 pixels, enquanto o segundo deve ter uma margem de 10 pixels e um padding de 50 pixels.

Estilos diferentes para dois parágrafos

O que fazer nesse caso? O código que temos até o momento

p {
    border: 1px solid black;
    margin: 50px;
    padding: 10px;
}

estabelece margem de 50 pixels e padding de 10 pixels para todo elemento com nome p. E não podemos mudar o nome de um deles, pois diferenças visuais não mudam o fato de que ambos são parágrafos e devem continuar tendo esse significado.

Exercise 1

Answer

Lembrando: margin define o espaçamento para fora da borda e padding define o espaçamento para dentro da borda.

Podemos resolver isso adicionando um atributo class aos parágrafos. Isso permite estabelecer que eles são de classes diferentes.

<p class="first">
    Para fazer seu bolo de cenoura de liquidificador de uma vez só é
    preciso um liquidificador potente, mas se achar a massa pesada para
    o seu aparelho, corte a cenoura em pedaços bem pequenos e só bata
    no aparelho os ingredientes úmidos. Depois que estiver tudo
    homogêneo, incorpore a mistura líquida aos ingredientes secos,
    mexendo bem e delicadamente. Além de poupar o seu liquidificador,
    misturar os ingredientes secos delicadamente com a mão também é o
    segredo para o seu bolo de cenoura não solar.
</p>
<p class="second">
    Para garantir o seu bolo de cenoura fofinho, lembre-se de testar o
    fermento antes de adicioná-lo à massa e peneire a farinha de trigo!
    Isso vai garantir que um bolo de cenoura fofo, leve e ainda mais
    delicioso!
</p>

Uma vez que isso está estabelecido, podemos escrever blocos CSS em que os seletores se referem a classes em vez de nomes.

p {
    border: 1px solid black;
}

.first {
    margin: 50px;
    padding: 10px;
}

.second {
    margin: 10px;
    padding: 50px;
}

O código acima estabelece o seguinte:

a todo elemento com nome p, aplicar border: 1px solid black;
a todo elemento com classe first, aplicar margin: 50px e padding: 10px;
a todo elemento com classe second, aplicar margin: 10px e padding: 50px.

Repare que os dois últimos blocos usam ponto (.) para indicar que o seletor é uma classe e não um nome. Repare também que o bloco com seletor p continua existindo, pois ele é útil para definir propriedades que todo parágrafo deve ter, independente de classe.

Isso é apenas uma amostra do que seletores podem fazer. A sintaxe de seletores é muito poderosa e vai muito além de classes. Porém, seletores de classe serão, de longe, os mais usados ao longo do semestre e merecem destaque especial. Os outros podemos introduzir na prática, em handouts.

Exercise 2

Qual das opções abaixo podemos utilizar para que apenas o primeiro parágrafo tenha o fundo com a cor azul?

p {
  border: 1px solid black;
}

.first {
  margin: 50px;
  padding: 10px;
  background-color: blue;
}

.second {
  margin: 10px;
  padding: 50px; 
}

.p {
  border: 1px solid black;
}

.first {
  margin: 50px;
  padding: 10px;
  background-color: blue;
}

.second {
  margin: 10px;
  padding: 50px;
}

.p {
  border: 1px solid black;
}

first {
  margin: 50px;
  padding: 10px;
  background-color: blue;
}

second {
  margin: 10px;
  padding: 50px;
}

p {
  border: 1px solid black;
}

first {
  margin: 50px;
  padding: 10px;
  background-color: blue;
}

second {
  margin: 10px;
  padding: 50px;
}

Answer

Utilizamos o ponto (.) apenas quando queremos indicar que o seletor é uma classe e não um elemento.

Estamos quase terminando! Falta apenas a última parte.