Select first paragraph different color and remain paragraph different color in css

technical talkiess
0

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Css first excercise</title>

</head>

<style>

    div{

        border: 1px solid black;

        margin: 2px;

    }

    div > p{

        background-color: blue;

        color: white;

    }

    

    div > p:nth-child(2){

        background-color: yellow;

        color: red;

    }

</style>

<body>

    <div class="container">

        <div class="item">

            <h2>This is Fist div</h2>

            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim animi natus saepe rerum corporis itaque alias quibusdam deleniti eligendi laudantium!</p>

            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore non perspiciatis veniam ad perferendis doloribus natus repellendus consequatur ipsum quam.</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

        </div>

        <div class="item">

            <h2>This is Second div</h2>


            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim animi natus saepe rerum corporis itaque alias quibusdam deleniti eligendi laudantium!</p>

            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore non perspiciatis veniam ad perferendis doloribus natus repellendus consequatur ipsum quam.</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

        </div>

        <div class="item">

            <h2>This is Third div</h2>


            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim animi natus saepe rerum corporis itaque alias quibusdam deleniti eligendi laudantium!</p>

            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore non perspiciatis veniam ad perferendis doloribus natus repellendus consequatur ipsum quam.</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

        </div>

        <div class="item">

            <h2>This is Four div</h2>


            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim animi natus saepe rerum corporis itaque alias quibusdam deleniti eligendi laudantium!</p>

            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore non perspiciatis veniam ad perferendis doloribus natus repellendus consequatur ipsum quam.</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

        </div>

        <div class="item">

            <h2>This is Five div</h2>


            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, voluptatem! Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim animi natus saepe rerum corporis itaque alias quibusdam deleniti eligendi laudantium!</p>

            <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore non perspiciatis veniam ad perferendis doloribus natus repellendus consequatur ipsum quam.</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

            <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique officiis tempore ducimus vero dolor? Fuga, pariatur. Expedita placeat quia doloremque enim. Perferendis tempore laborum odio autem, nulla sint possimus asperiores?</p>

        </div>

    </div>

</body>

</html>

Tags

Post a Comment

0Comments

Thanks you for commenting your questions. I will see question and respond you.

Post a Comment (0)