1

I have 5 paragraphs and a paragraph nested in a div like in the code below, the problem is with p:hover{background-color: gray;}, it should change the background of all paragraphs but it doesn't change the ones which have id attribute or are nested inside a div which has id attribute.

p {
  background-color: brown;
  padding: 10px;
}

.p1 {
  background-color: darkcyan;
}

.p2 {
  background-color: darkmagenta;
  color: white;
}

#p1 {
  background-color: royalblue;
  color: white;
}

#p2 {
  background-color: orangered;
}

#d1 {
  background-color: darkgreen;
  padding: 5px;
}

#d1 p {
  background-color: yellowgreen;
}

p:hover {
  background-color: gray;
}
<p>This is a normal paragraph</p>
<p class="p1">This is a paragraph with class attribute "p1"</p>
<p class="p2">This is a paragraph with class attribute "p2"</p>
<p id="p1">This is a paragraph with id attribute "p1"</p>
<p id="p2">This is a paragraph with id attribute "p2"</p>

<div id="d1">
  <p>This is a paragraph nested in a div of id equal to "d1"</p>
</div>
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
mzage
  • 278
  • 1
  • 3
  • 12
  • You requirement isn't clear – Mr. Alien Mar 10 '19 at 17:50
  • 1
    Sounds like a [CSS specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) issue – j08691 Mar 10 '19 at 17:52
  • Check out: https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered – dmanexe Mar 10 '19 at 17:54
  • @j08691 thanks for the link, adding `!important` at the end of `background-color` in `p:hover` works, but why does it happen in the first place? – mzage Mar 10 '19 at 17:56
  • @j08691 Please answer the full explanation and correct code so i can check as the correct answer. – mzage Mar 10 '19 at 17:57

0 Answers0