Solucionado
Minha dúvida é entre quando devemos utilizar classe como seletor, e quando devemos utilizar a relação com ">"? Existem casos que o caminho com ">" o caminho é muito grande, e outras que existe uma saturação muito grande de classes no HTML e acaba ficando muito poluído.
Oi, Gustavo, tudo bem?
A ideia de utilizarmos o seletor class é quando queremos que vários elementos pertençam a uma mesma classe, já a utilização do seletor id é quando queremos exclusividade de um elemento.
Sobre o seletor > utilizamos quando queremos que qualquer elemento A que seja filho ou descendente direto de elemento B receba o estilo, exemplo:
<div>
<h2>Oi, Meu nome é Laís</h2>
<p>E trabalho na Alura</p>
</div>div > p {
background-color: yellow;
}Nesse exemplo acima, eu quero que o filho direto da div que no caso é o elemento p, receba a cor amarela.
Se ficou alguma dúvida é só falar!
Oi Gustavo, Tudo bem? Vou te apresentar algumas coisas que uso no meu dia a dia espero te ajudar, eu utilizo a definição de classe o máximo que posso para definir padrões que quero utilizar nos meus elementos, no caso do “>” eu utilizo bastante para definir um estilo diferente quando quero que ele tenha um outro comportamento dentro de outra tag/classe por exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opa</title>
<style>
.texto {
font-size: 2em;
color: blue;
}
.black-box {
background-color: black;
}
.black-box > .texto {
color: white;
}
</style>
</head>
<body>
<div>
<p class="texto">opaaaaa.</p>
</div>
<div class="black-box">
<p class="texto">outro texto.</p>
</div>
</html>
Assim Podemos manter o padrão da classe .texto porém quando ele está dentro de um elemento com o .black-box ele apresenta a cor branca para ficar visível.
Além disso é legal sempre manter no máximo 3 níveis no seu seletor, o browser ele procura achar a relação da direita para esquerda, ou seja primeiro ele procura todos os spans, depois seleciona apenas os que são filho do elemento
e depois seleciona apenas os que tiverem dentro de uma div, isso ajudaria a mater otimizado.
div p > span {
color: red;
}Obrigado por ambas as respostas, as duas solucionaram duvidas que eu possuía.