Porque o parágrafo não ficou com a cor da classe?

CSS

HTML5

08/05/2022

Criei esse exercício aqui para estudar e entendi o porque de o meu "parágrafo 2" ter ficado cinza

<div>
<p>Outros paragrafos</p>
<p>Outros parágrafos</p>
</div>
<div class="paragrafo p">
<p>Parágrafo 1</p>
<p class="paragrafo-cinza">Parágrafo 2</p>
<p>Parágrafo 3</p>
</div>

p {
  color: blue;
}

.paragrafo p{
  color: red;
}

.paragrafo .paragrafo-cinza {
  color: gray;
}


Eu só não entendi porque nesse código CSS abaixo, o meu "parágrafo 2" também não ficou cinza. 
p {
  color: blue;
}

.paragrafo p{
  color: red;
}

.paragrafo-cinza {
  color: gray;
}


Ou seja, a classe ".paragrafo-cinza", não deveria tornar o " paragrafo 2" cinza?
Reginaldo Assunção

Reginaldo Assunção

Curtidas 2

Melhor post

Diego Marinho

Diego Marinho

10/05/2022

1 - Acho que você precisa alterar o nome dessa classe "paragrafo p". Se você tirar esse espaço, já corrigiria um dos problemas. Poderia usar por exemplo o nome paragrafo-p. Usar espaços em branco na sintaxe de classes dá problemas.
2- O CSS funciona em cascata, e usa o sistema de heranças, logo se você coloca no CSS que todos os elementos com tags <p> dentro da <div classe=".paragrafo p"> irão ter color = "red" , posteriormente
não tem como você "setar" color= "gray" para um <p> dessa mesma <div classe=".paragrafo p"> , colocando somente uma classe diferente pra ela.

Nesse caso você possui algumas opções :

A - Usar um id no lugar de uma class para o <p> que carrega a color "gray".
OBS: IDs tem prioridade sobre classes no CSS, logo teria prevalência sobre a referência da classe da <div> + <p> .... Ficando assim : 


<html>
....
<p id="paragrafo-cinza">Parágrafo 2</p>
...
</html>

<style>

#paragrafo-cinza {
  color: gray;
}

</style>



B- Você pode usar o "!important" após configurar o parâmetro color para "gray". Nesse caso não precisaria mudar nada no HTML.... Ficaria assim :
OBS : Mas não é recomendável abusar do "!important" 


.paragrafo-cinza {
  color: gray !important;
}


C- Mudar a tag <p> para uma tag <span> . Ou inserir a tag <p> dentro de uma tag <span> :

<html>
....
<span><p id="paragrafo-cinza">Parágrafo 2</p></span>
...
</html>

<style>

span .paragrafo-cinza {
  color: gray ;
}
</style>


Acho que é isso...
GOSTEI 2

Mais Respostas

Diego Marinho

Diego Marinho

08/05/2022

Pensei que nessa linha do seu HTML : <div class="paragrafo p">, você setou o nome da class com espaço propositalmente, mas pode ser somente um erro de digitação, sendo que você quis colocar o nome da sua classe de "paragrafo", já que no seu css está : .paragrafo p{ color: red;} . Mesmo assim , as resoluções acima servem da mesma forma... flw
GOSTEI 1
Reginaldo Assunção

Reginaldo Assunção

08/05/2022

Valeu Diego. Consegui aqui.
GOSTEI 0
POSTAR