Question

$("p div").click(function() {
  $(this).css({
    "color": "#F00",
    "font": "bold 20px verdana",
    "background-color": "#0FF"
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Hello<div> World!</div></p>

Nothing happens when I click the “World” text, and when I inspect the elements, it says:

<p>Hello</p>
<div> World</div>
<p></p>

Notice those <p> tags. How could that happen?

Answer 1

The browser is kicking the <div> out of the <p> because it isn’t a valid placement, so you won’t be able to select it there.

Browsers often do try to make corrections for invalid HTML, but the result isn’t necessarily predictable, so you’ll need to use valid HTML instead.

---

http://www.w3.org/TR/html401/struct/text.html#h-9.3.1

“The P element represents a paragraph. It cannot contain block-level elements (including P itself).”