1

I have a few questions relating to css selectors. Please help. In the following code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            selector {
                color: blue;
            }
        </style>
    </head>
    <body>
        <section>
            <p id="apple">apple
                <div class="orange">orange</div>
            </p>
            <p class="mango"> mango
                <div>banana</div>
            </p>
        </section>
    </body> 
</html>

If selector is section, then all section's children inherit the color property. Why is it not the case of when the selector is p?

Selector = section p, targets all p elements inside section. Why doesn't it work when selector = p div?

Selector = section #apple, targets p element with id="apple" as expected.

But Selector = section #apple .orange doesn't work. Thank you in advance!

kbl
  • 129
  • 5

1 Answers1

5

The <div> tag can NOT be inside the <p> tag, because the paragraph will be broken at the point, where the <div> tag is entered.

To apply styles inside a paragraph use the <span> tag, which is used with inline elements.

p {
  color: blue;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <section>
    <p id="apple">apple
      <span class="orange">orange</span>
    </p>
    <p class="mango"> mango
      <span>banana</span>
    </p>
  </section>
</body>

</html>
Ponsiva
  • 944
  • 4
  • 15