Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Front-end I / Aula

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

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:

HTML
CSS
JS
​x
1
 <!DOCTYPE html>
2
<html>
3
​
4
<head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
8
  <title>Seletores Avançados</title>
9
  <style>
10
    /* Seletor de todos elementos. */
11
    * {
12
      margin: 0;
13
    }
14
​
15
    /* Seletor de descendente */
16
    /* div p{
17
            color:rgb(79, 165, 56);
18
        } */
19
​
20
    /* Seletor de descendente direto */
21
    /* div > p{
22
            color:rgb(79, 165, 56);
23
        } */
24
​
25
    /* Seleciona os h2 que seguem e compatilham mesmo pai da section. */
26
    /* section ~ h2 {
27
            color: lightsteelblue;
28
        } */
29
​
30
    /* Selectiona os h2 irmão e logo após a section */
31
    /* section + h2 {
32
            color: lightsteelblue;
33
        } */
34
  </style>
35
</head>
36
​
37
<body>
38
​
39
  <div>
40
    <h2>Título 2</h1>
41
      <section>
42
        <p>Parágrafo dentro de uma section</p>
43
        <div>
44
          <p>Parágrafo dentro de uma div.</p>
45
        </div>
46
      </section>
47
      <h2>Título 2 Logo após a Section</h2>
48
      <h2>Título 2 Logo após a H2</h2>
49
  </div>
50
​
51
  <h2>Título 2 após a div</h2>
52
​
53
  <p>Parágrado fora irmão</p>
54
​
55
</body>
56
​
57
</html>
1
1
1
1

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


[A] Anterior
2/5
Próxima [D]

Sumário

Versão 5.3 - Todos os Direitos reservados