More on selectors in css

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>More on selectors</title>

</head>

<style>

    h1{

        background-color: red;

        color: black;

        font-weight: bold;

        text-align: center;

    }

    /* if p is contained by any li which is contained by div */

    div li p{

        color: yellow;

        background-color: green;

        font-weight: bold;

    }

    /* div > p ka matlab shirf div ke undar wala element ko hi select karo */

    div > p{

        color: rgb(0, 132, 255);

        background-color: rgb(13, 231, 13);

        font-weight: bold;

    }

    /* Div+ p ka matlab he div ke thik Agla element ko select karo */

    div + p{

        color: rgb(8, 8, 8);

        background-color: rgb(231, 238, 137);

    }

</style>

<body>

    <h1>This is more on selectors</h1>

    <div class="container">

        <div class="row">

            <ul>

                <li class="item"><p> this is another paragraph inside li</p></li> 

                <li>this will not get affected</li>

                <p>this is a para inside ul</p>

            </ul>

            <p>This is a paragraph</p>

            <p>this is a second paragraph</p>

        </div>

        <p>This is another paragraph</p>

    </div>

    <p>this is outermost paragraph</p>

</body>

</html>