More on CSS 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">
    <link rel="stylesheet" href="CSS/More_on_CSS_Selectors.css">
    <title>More on CSS Selectors</title>
</head>

<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 paragraph inside ul</p>
            </ul>
            <p>This is a paragraph</p>
        </div>
        <p>This is another paragraph</p>
    </div>
    <p>This is outermost paragraph</p>
</body>

</html>




Below File is CSS/More_on_CSS_Selectors.css File
h1 {
    background-color: #ff0000;
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

/* If p is contained by any li which is contained by div */
/* div li p {
    color: #ffff00;
    background-color: #008000;
    font-weight: bold;
} */

/* Below "div > p" means "Direct child paragraph Tag <p> only inside <div> Tag" */
/* Here below <div> tag is direct Parent of paragraph Tag <p> */
/* If p is right inside div then this CSS will be applied */
/* div>p {
    color: #ffff00;
    background-color: #008000;
    font-weight: bold;
} */

/* Below "div + p" means "Only paragraph Tag <p> whose exactly before <div> Tag" */
/* If p is right after div i.e. p is the next sibling of div */
div+p {
    color: #ffffff;
    background-color: #f27272;
}



Comments

Post a Comment