가상 클래스 (:)
<style>
a:link {
color: blue;
}
a:visited {
color:red;
}
</style>
</head>
<body>
</body>
선택자:not (선택자)
<style>
p:not(.panda) {
color:red;
}
</style>
</head>
<body>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis obcaecati maiores beatae ipsum officia hic reprehenderit quae debitis reiciendis culpa nulla ratione assumenda, unde aperiam ea sunt dolorem. Laudantium?</p>
<p class="panda">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam non hic, consequuntur maxime, distinctio eveniet temporibus in sed assumenda reprehenderit placeat facilis, dolor consectetur sunt nulla laboriosam amet? Magnam, sed!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius impedit quis atque odio ex animi unde fuga consectetur quod iste debitis repudiandae, obcaecati esse blanditiis fugiat mollitia molestias ratione facilis.</p>
nth-child ()
<style>
.panda p:nth-child(2) {
color: red;
}
</style>
</head>
<body>
<div class="panda">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis obcaecati maiores beatae ipsum officia hic reprehenderit quae debitis reiciendis culpa nulla ratione assumenda, unde aperiam ea sunt dolorem. Laudantium?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam non hic, consequuntur maxime, distinctio eveniet temporibus in sed assumenda reprehenderit placeat facilis, dolor consectetur sunt nulla laboriosam amet? Magnam, sed!</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius impedit quis atque odio ex animi unde fuga consectetur quod iste debitis repudiandae, obcaecati esse blanditiis fugiat mollitia molestias ratione facilis.</p>
nth-of-type ()
<style>
.panda .coding:nth-of-type(1){
color: red;
}
</style>
</head>
<body>
<div class="panda">
<p class="coding">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis obcaecati maiores beatae ipsum officia hic reprehenderit quae debitis reiciendis culpa nulla ratione assumenda, unde aperiam ea sunt dolorem. Laudantium?</p>
<p class="coding">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam non hic, consequuntur maxime, distinctio eveniet temporibus in sed assumenda reprehenderit placeat facilis, dolor consectetur sunt nulla laboriosam amet? Magnam, sed!</p>
<p class="coding">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius impedit quis atque odio ex animi unde fuga consectetur quod iste debitis repudiandae, obcaecati esse blanditiis fugiat mollitia molestias ratione facilis.</p>
nth-last-of-type()
<style>
.panda .coding:nth-last-of-type(1){
color: red;
}
</style>
</head>
<body>
<div class="panda">
<p class="coding">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis obcaecati maiores beatae ipsum officia hic reprehenderit quae debitis reiciendis culpa nulla ratione assumenda, unde aperiam ea sunt dolorem. Laudantium?</p>
<p class="coding">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquam non hic, consequuntur maxime, distinctio eveniet temporibus in sed assumenda reprehenderit placeat facilis, dolor consectetur sunt nulla laboriosam amet? Magnam, sed!</p>
<p class="coding">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius impedit quis atque odio ex animi unde fuga consectetur quod iste debitis repudiandae, obcaecati esse blanditiis fugiat mollitia molestias ratione facilis.</p>
only-child
<style>
.panda .coding:only-child{
color: red;
}
</style>
</head>
<body>
<div class="panda">
<p class="coding">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis obcaecati maiores beatae ipsum officia hic reprehenderit quae debitis reiciendis culpa nulla ratione assumenda, unde aperiam ea sunt dolorem. Laudantium?</p>
</div>
가상 요소 (::)
fitst-letter
<style>
.coding::first-letter {
font-weight: bold;
font-size: 2em;
}
</style>
</head>
<body>
<p class="coding">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos veritatis obcaecati maiores beatae ipsum officia hic reprehenderit quae debitis reiciendis culpa nulla ratione assumenda, unde aperiam ea sunt dolorem. Laudantium?</p>
</div>
