Seletores avançados

Nesta aula, você verá novos seletores CSS que podem ser utilizados para selecionar mais precisamente os elementos HTML.

Seletor global

O seletor global permite selecionar todos os elementos HTML. Veja a sintaxe:

* {
    margin: 0;
}

No exemplo acima, todos os elementos HTML da página terão sua margem alterada para zero.

Seletor descendente

Seleciona todos os elementos que estão no interior de outro elemento. Veja no exemplo:

div p {
  color: rgb(79, 165, 56);
}

No exemplo acima, todos os parágrafos que estão dentro de uma <div> serão selecionado e terão a sua cor alterada.

Seletor descendente direto

Esse seletor seleciona todos os elementos que estão no interior de outro elemento diretamente. Veja no exemplo:

div > p {
  color:rgb(79, 165, 56);
}

No exemplo acima, todos os parágrafos que possuem uma <div> como pai serão selecionados. Perceba que a diferença em relação ao anterior está relacionada a ser filho direto ou indireto do elemento pai.

Seletor de irmão

Esse seletor seleciona os elementos que são precedidos por outro elemento (no mesmo nível do HTML). Veja no exemplo:

section ~ h2 {
  color: lightsteelblue;
}

O exemplo acima seleciona todos os elementos <h2> que são precedidos por um elemento <section>.

Seletor de irmão direto

Esse seletor seleciona elementos que são precedidos imediatamente por outro elemento (no mesmo nível do HTML). Veja no exemplo:

section + h2 {
  color: lightsteelblue;
}

O exemplo acima seleciona o primeiro elemento <h2>, que é precedido imediatamente por um elemento <section>.

Exemplo completo

Confira abaixo o exemplo completo utilizado na aula:

 <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Seletores Avançados</title>
  <style>
    /* Seletor de todos elementos. */
    * {
      margin: 0;
    }

    /* Seletor de descendente */
    /* div p{
            color:rgb(79, 165, 56);
        } */

    /* Seletor de descendente direto */
    /* div > p{
            color:rgb(79, 165, 56);
        } */

    /* Seleciona os h2 que seguem e compatilham mesmo pai da section. */
    /* section ~ h2 {
            color: lightsteelblue;
        } */

    /* Selectiona os h2 irmão e logo após a section */
    /* section + h2 {
            color: lightsteelblue;
        } */
  </style>
</head>

<body>

  <div>
    <h2>Título 2</h1>
      <section>
        <p>Parágrafo dentro de uma section</p>
        <div>
          <p>Parágrafo dentro de uma div.</p>
        </div>
      </section>
      <h2>Título 2 Logo após a Section</h2>
      <h2>Título 2 Logo após a H2</h2>
  </div>

  <h2>Título 2 após a div</h2>

  <p>Parágrado fora irmão</p>

</body>

</html>

Para mais detalhes sobre seletores avançados, consulte este link.

Termo de uso

arrow_back Aula 13 - Seletores avançados, Pseudoclasses e Pseudoelementos