Porque o parágrafo não ficou com a cor da classe?
08/05/2022
0
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>
Eu só não entendi porque nesse código CSS abaixo, o meu "parágrafo 2" também não ficou cinza.
Ou seja, a classe ".paragrafo-cinza", não deveria tornar o " paragrafo 2" 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
Curtir tópico
+ 2
Responder
Post mais votado
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 :
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"
C- Mudar a tag <p> para uma tag <span> . Ou inserir a tag <p> dentro de uma tag <span> :
Acho que é isso...
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...
Diego Marinho
Responder
Mais Posts
10/05/2022
Diego Marinho
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
Responder
Clique aqui para fazer login e interagir na Comunidade :)