Seletores | Notion

A linguagem CSS possui diversos seletores que nos permitem aplicar estilos a elementos HTML de forma específica.

Seletor de Elemento: é usado para selecionar elementos HTML específicos. Por exemplo, para aplicar um estilo a todos os elementos do documento, usamos o seguinte código:

p {
  font-size: 16px;
  color: #000;
}

Seletor de Classe: é usado para selecionar elementos HTML que possuem uma classe específica. Por exemplo, para aplicar um estilo a todos os elementos que possuem a classe "gato-domestico", usamos o seguinte código:

.gato-domestico {
  font-size: 16px;
  color: #000;
}

Seletor de ID: é usado para selecionar elementos HTML que possuem um ID específico. Por exemplo, para aplicar um estilo ao elemento que possui o ID "gato-domestico", usamos o seguinte código:

#gato-domestico {
  font-size: 16px;
  color: #000;
}

Seletor de Atributo: é usado para selecionar elementos HTML que possuem um atributo específico. Por exemplo, para aplicar um estilo a todos os elementos que possuem o atributo "cor", usamos o seguinte código:

[cor] {
  font-size: 16px;
  color: #000;
}

Seletor de Pseudo-classe: é usado para selecionar elementos HTML que possuem um estado específico. Por exemplo, para aplicar um estilo a todos os elementos que estão em um estado "ativo", usamos o seguinte código:

p:active {
  font-size: 16px;
  color: #000;
}

Com esses seletores, podemos aplicar estilos específicos a elementos HTML, como no seguinte exemplo:


<p class="gato-domestico">Este é um gato domestico.</p>
<p id="gato-domestico">Este é um gato domestico.</p>
<p cor="preto">Este é um gato domestico.</p>

Neste exemplo, podemos aplicar um estilo ao elemento usando qualquer um dos seletores acima.

<html>
  <head>
    <title>Seletores CSS</title>
    <style>
      div{
        color:red;
      }
      #nome{
        font-size: 30px;
      }
      #segundonome{
        font-size: 5px;
      }
      .sobrenome{
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="nome" id="nome">José</div>
    <div class="nome" id="segundonome">Daniel</div>
    <div class="sobrenome">Pereira</div>
    <div class="sobrenome">Ribeiro</div>
    <div class="sobrenome">Filho</div>
  </body>
</html>