[CSS] 선택자 참조 (Selector Reference) - class 편

쉼표 ( , )

.class1, .class2, .class3

class1, class2, class3 모두 스타일이 적용됩니다. (OR 조건)

<style>
    .class1, .class2, .class3 {
        color: red;
    }
</style>
    
<div class="class1">
    class1
</div>
<div class="class2">
    class2
</div>
<div class="class3">
    class3
</div>

결과

 

띄어쓰기 (공백)

.class1 .class2 .class3

class1 하위 class2 하위 class3에만 스타일이 적용됩니다.

<style>
    .class1 .class2 .class3 {
        color: red;
    }
</style>

<div class="class1">
    class1
    <div class="class2">
        class2
        <div class="class3">
            class3
        </div>
    </div>
</div>

결과

 

붙여쓰기 (공백없이)

.class1.class2.class3

"class1 class2 class3"에만 스타일이 적용됩니다. (AND 조건)

<style>
    .class1.class2 {
        color:blue;
    }
    .class1.class2.class3 {
        color: red;
    }
</style>

<div class="class1">
    class1
</div>

<div class="class1 class2">
    class2
</div>

<div class="class1 class2 class3">
    class3
</div>

결과

 

Reference

https://www.w3schools.com/cssref/css_selectors.php

CSS Selectors Reference