Executando verificação de segurança...
6
josuekla
2 min de leitura ·

Conhecendo os Seletores de CSS #002

Oi, pessoal! Hoje vou falar um pouco sobre os diferentes tipos de seletores de CSS e como eles funcionam para estilizar elementos em uma página HTML. Vamos nessa!

  • Seletores de Elemento (Tag)
    Esses seletores aplicam estilos a todos os elementos de um tipo específico. Por exemplo, se você quiser que todos os parágrafos <p> fiquem azuis, use o seletor de elemento:
p {
    color: blue;
}
  • Seletores de Classe
    Os seletores de classe são usados para aplicar estilos a elementos com uma classe específica. Basta colocar um ponto "." antes do nome da classe. Veja como funciona:
.intro {
    font-size: 20px;
}

Veja como usar no HTML:

<p class="intro">Este é um parágrafo com uma classe.</p>
  • Seletores de ID
    Se você precisar aplicar estilos a um único elemento, use o seletor de ID. Ele é representado por uma cerquilha "#" antes do nome do ID:
#main {
    background-color: yellow;
}

No HTML fica assim:
<div id="main">Este é um div com um ID.</div>

  • Seletores de atributo
    Esses seletores aplicam estilos a elementos que possuem um atributo específico. Por exemplo, para estilizar links que abrem em uma nova aba target=_blank:
    a[target="_blank"] { color: red; }
    E assim que fica no HTML:
    <a href="http://example.com" target="_blank">Link</a>

  • Seletores de Descendentes
    Os seletores de descendentes são usados para aplicar estilos a elementos que estão dentro de outros elementos. Por exemplo, para estilizar todos os parágrafos dentro de um <div>:
    div p { color: green; }

No HTML:

<div>
    <p>Este parágrafo dentro de um div será verde.</p>
</div>

No CSS, as regras têm uma ordem de prioridade específica. O estilo inline vem primeiro, depois o CSS interno, e por último o CSS externo. Isso significa que, se você aplicar estilos de formas diferentes, o inline sempre terá mais peso e será aplicado sobre os outros.

Quando falamos sobre o uso de classes e IDs no CSS, a classe é geralmente a mais usada. Ela permite alterações rápidas em vários elementos ao mesmo tempo. Já o ID é único e específico, ideal para quando você quer aplicar um estilo a apenas um único elemento na página.

Então é isso, pessoal! Espero que tenham aprendido um pouco sobre o uso de seletores no CSS. Muito obrigado por ler até aqui!!!

Se quiserem se aprofundar mais no assunto, segue o link:
Documentação sobre Seletores CSS - MDN

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_selectors

Carregando publicação patrocinada...
3
kht

Vale lembrar que dá para combinar esses seletores.

Por exemplo, um seletor de elemento junto com a classe: p.intro seleciona os parágrafos que contém a classe intro. Qualquer outro elemento que tiver esta classe não será selecionado. Ou seja, se eu tiver este CSS:

p.intro {
  color: red;
}

p {
  color: green;
}

E este HTML:

<p>verde</p>
<p class="intro">vermelho</p>
<div class="intro">não muda de cor</div>

O primeiro parágrafo fica verde, o segundo fica vermelho e o div não muda de cor.

Da mesma forma, p#intro seleciona somente o parágrafo cujo id é intro.

E claro, dá para fazer combinações ainda mais complexas, como div.intro a[target="_blank"]. Neste caso, vai pegar os elementos a que contém o atributo target igual a _blank, e que estão dentro de uma div com a classe intro. Ou seja, com este CSS:

div.intro a[target="_blank"] {
  color: red;
}

div a {
  color: blue;
}

E este HTML:

<div class="intro">
  <a href="/" target="_blank">vermelho</a>
  <a href="/">azul</a>
</div>
<div>
  <a href="/" target="_blank">outro azul</a>
  <a href="/">e mais outro azul</a>
</div>

Somente o primeiro link fica vermelho, e todos os outros ficam azuis.

E também daria para fazer algo como a[target="_blank"].intro: seleciona somente elementos a que possuem o atributo target igual a _blank e a classe intro. Enfim, dá para combinar da maneira que precisar.

Quanto aos seletores de descendentes, existe o > que serve para selecionar somente o descendente direto.

Por exemplo, com este CSS:

span {
  background-color: lightblue;
}

div span {
  background-color: gray;
}

div > span {
  background-color: yellow;
}

E este HTML:

<div>
  <span>
    Fundo amarelo
    <span>Fundo cinza</span>
  </span>
</div>
<span>Fundo azul claro</span>

O primeiro span é descendente direto do div, então o estilo definido em div > span se aplica e ele fica com fundo amarelo. Já o segundo span, apesar de estar dentro do div, não é descendente direto deste (pois ele está dentro do primeiro span), então o estilo div span é aplicado a ele, ficando com o fundo cinza. E o terceiro span não está dentro de nenhuma div, então ele fica com fundo azul claro.

E existem outros como os sibling combinators, que procuram elementos "irmãos" (que estão dentro do mesmo elemento, e na mesma hierarquia). Por exemplo, com este CSS:

h1 ~ span {
  color: red;
}

E este HTML:

<div>
  <span>antes</span>
  <h1>abc</h1>
  <span>vermelho 1</span>
  <p>blabla <span>não sou sibling</span></p>
  <span>vermelho 2</span>
</div>

Somente o segundo e o último span's ficam vermelhos, pois h1 ~ span pega apenas os elementos span que são "irmãos" de h1, aparecem depois dele e estão no mesmo nível da hierarquia (ambos possuem o mesmo elemento "pai", que no caso é a div). O primeiro span está no mesmo nível mas aparece antes, por isso não é afetado. E o terceiro span não está no mesmo nível, pois o elemento "pai" dele é o p.

E se mudarmos o seletor para h1 + span, somente o segundo span fica vermelho, pois agora ele pega somente o span que está imediatamente depois de h1.

1