how can i let my element css selector work?

Question

The following is my sample.

<html>
    <head>
    <style>
    .test{
    background-color: red;
    p {
      background-color: yellow;
    }
    }

    </style>
    </head>
    <body>

    <div class="test">
      <p id="firstname">My name is a.</p>
      <p id="hometown">I live in b.</p>
    </div>
    <p>My best friend is c.</p>
    </body>
    </html>

as you see. why the "p" in div not yellow? if i want let two "p" which is in div and class="test" is must exist. how can i write in my class test Thank you!

score 0 · Accepted Answer · answered Dec 31 '20 at 09:01

Nested selector does not work like that. I have updated the css. Please check

<html>
    <head>
    <style>
    .test{
    background-color: red;
    
    }
    .test p {
      background-color: yellow;
    }

    </style>
    </head>
    <body>

    <div class="test">
      <p id="firstname">My name is a.</p>
      <p id="hometown">I live in b.</p>
    </div>
    <p>My best friend is c.</p>
    </body>
    </html>

how can i let my element css selector work?

1 Answers1