HTML CSS

KokoaTalk clone coding: pseudo selector 1

jane.dev 2021. 5. 4. 14:10
반응형

 It is more complex way of pointing compliment.

 

<head>

    <style>

        body {

                height: 1000vh;

                margin: 50px;

        }

        div {

                width: 150px;

                height: 150px;

                background-color: royalblue;

        }

        div:first-child {

                background-color: wheat;

        }

        div:last-child {

                background-color: thistle;

        }

    </style>

</head>

<body>

    <div></div><!--first child-->

    <div></div>

    <div></div>

    <div></div><!--last child-->

</body>

pseudo selector

 

<head>

    <style>

        body {

                height: 1000vh;

                margin: 50px;

        }

        span {

                background-color: royalblue;

        }

        span:nth-child(2n) { 'span: nth-child(2), span: nth-child(4),-','span: nth-child(even)'

                background-color: thistle;

        }

    </style>

</head>

<body>

    <span>Hello!</span>

    <span>Hello!</span>

    <span>Hello!</span>

    <span>Hello!</span>

    <span>Hello!</span>

    <span>Hello!</span>

    <span>Hello!</span>

</body>

you can do like this 'span: nth-child(3n-1)'....