Erro de iniciante em seletor de descendentes
Observe o seguinte seletor:
p.eee {
color: red;
}
Você já deve saber que esse seletor escolherá
parágrafos com a classe eee. Por exemplo, estes:
<p class="eee">
lorem ipsum
</p>
<p class="eee">
lorem ipsum
</p>
Agora, observe este seletor:
p .eee {
color: green;
}
Este seletor difere do anterior porque
entre o nome da tag e o nome da classe
há um espaço. Este espaço representa o
seletor de descendentes. Ou seja, neste caso
estamos selecionando todos os elementos com a classe eee,
que estão dentro de parágrafos. Por exemplo, este
seletor escolherá os seguintes spans:
<p>
lorem <span class="eee">ipsum</span>
</p>
<p>
lorem <span class="eee">ipsum</span>
</p>
Resultado da execução do código:
Então, mais uma vez: p.eee - esse seletor seleciona parágrafos com a classe
eee. Mas se eu fizer assim: p .eee, então seleciono
todos os elementos com a classe eee, localizados dentro de parágrafos.
Sinta essa diferença.
Explique o que o seletor escolhe no código abaixo. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:
p.bbb {
color: red;
}
Explique o que o seletor escolhe no código abaixo. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:
p .bbb {
color: red;
}
Explique o que o seletor escolhe no código abaixo. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:
.eee p.bbb {
color: red;
}
Explique o que o seletor escolhe no código abaixo. Em seguida, escreva o código HTML que se adequa a esse seletor. Aqui está o código com o seletor:
.eee p .bbb {
color: red;
}