0

I am trying to restyle div's who reside inside p elements (such are automatically created when using content editable on text). But selector have no effect - div > p works whereas p > div doesn't.

div > p{
  background-color: yellow;
}

p > div{
  background-color: yellow;
}
<div>123<p>45</p></div>
<p>123<div>45</div></p>

https://codepen.io/anon/pen/jZxmrm

tomermes
  • 22,950
  • 16
  • 43
  • 67
  • p element can not have div element as a child – Upendra Joshi Feb 21 '18 at 10:05
  • for more detail follow : https://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it – Upendra Joshi Feb 21 '18 at 10:06
  • 1
    You can't add `div` inside a `p` tag as per w3c standard. Read more about in this question https://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it – Suresh Ponnukalai Feb 21 '18 at 10:06
  • as stated in the question, this situation is automatically created if you use contenteditable, press enter when caret at the end – tomermes Feb 21 '18 at 10:06
  • `

    123

    45
    ` is invalid html. The DOM created by the browser out of that invalid html will be `

    123

    45

    `. And only the created DOM is relevant for the css rules.     – t.niese Feb 21 '18 at 10:09

0 Answers0