Seletores no CSS
Existem várias formas de fazer a seleção para estilização de tags no CSS, entre elas
a seleção direta pela tag, por id ou por classes.
1 - Seleção por tag
A seleção por tag é a mais fácil de entender, pois tudo o que precisamos fazer é
chamar a tag que queremos estilizar, ou se houver, suas tags filhas. Tags filhas?
Sim, você leu direito. As tags filhas são que estão dentro da tag pai, ou seja, a
tag que está dentro da tag principal.
Exemplo:
<div>
<p>
<span> </span>
</p>
</div>
Aqui a tag <div> é o pai principal,
a tag <p> é filha de div e pai/mãe
da tag <span>. Essa é a relação
parent e child das tags.
Agora dentro do CSS fazemos a seleção pelas tags, vamos usar como exemplo as tags
usadas no exemplo anterior:
/* para fazer a formatação de uma tag individualmente
de forma global: */
div{
color: blue;
background: yellow;
}
/* se quisermos fazer a formatação de uma tag, sem que
que altere o formato das tags com o mesmo nome, podemos
primeiro chamar seu parent e enfim chamar nossa tag:*/
div p{
font: arial;
}
p span{
font: monospace;
}
2 - Seleção por Id
A seleção por Ids acontece somente de tag tiver um identificador, o que é fácil de
fazer. Mas o que é Ids? O Id é um identificador único de uma tag, o que quiser que
só
existe um Id para cada tag e o mesmo não pode ser utilizado em outra tag.
Exemplo:
<div id="primeiro-bloco"> </div> <div id="segundo-bloco"> </div> <div id="terceiro-bloco"> </div>
Agora como fazemos para chamar esses Ids no CSS? Também não é difícil como soa, mas
primeiro temos que saber que no CSS os Ids são representados por "#", então todas
vezes que formos chamar um Id, adicionamos o "#".
Exemplo, dentro do CSS:
#primeiro-bloco {
color: blue;
}
#segundo-bloco {
color: red;
}
#terceiro-bloco {
color: green;
}
3 - Seleção por Class
A seleção por Class acontece somente se a tag já tiver sido classificada, o que é
fácil de
fazer. Mas o que são classes? Diferente do Id, uma mesma Class pode ser adicionada a
várias tags, ou seja, tags de diferente segmentos podem ter a mesma Class.
Exemplo:
<div class="post"> </div> <div class="post"> </div> <div class="post"> </div>
Assim como Id tem sua forma de representação, Class também, e em CSS uma Class é
representada por um ponto (".").
Exemplo, dentro do CSS:
.post{
color: yellow;
background-color: blue;
}