127강. select the text 적용

2019. 2. 14. 00:19Front End 강의내용

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        p{

            padding: 20px;

            border: 5px solid teal;

        }

        p:first-child::selection{

/*          첫번째 p, 드래그 선택 */

            background-color: teal;

            color: #fff;

        }

        p:last-child::selection{

/*            마지막 p, 드래그 선택 */

            background-color: red;

            color: #fff;

        }

    </style>

</head>

<body>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis quidem rerum quaerat. Asperiores explicabo, accusantium obcaecati velit ipsum unde, repudiandae, corporis dignissimos ipsam sequi voluptatem esse placeat, provident id atque!</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae veritatis labore ullam. Repudiandae, saepe vitae non hic velit quasi quaerat, repellat nihil vel fuga ut ex maxime. Nobis, aliquam, libero.</p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam porro vitae, sequi impedit tempora at ab, repellendus minima quidem ipsum reprehenderit consequatur placeat animi quo dolorem, voluptatibus amet qui, quaerat.</p>

</body>

</html>

'Front End 강의내용' 카테고리의 다른 글

128강. clearfix 적용  (0) 2019.02.15
126강. Dropcap 적용  (0) 2019.02.13
125강. ::before, ::after 적용  (0) 2019.02.13
124강. ::first-letter, ::first-line, ::selector 적용  (0) 2019.02.13
122강. only-of-type 적용  (0) 2019.02.12