css-seletores

Seletores no CSS

... Emilayne Rodrigues

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