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; }