[CSS] 선택자 명시도(selection-specificity) 문제

선택자 명시도에 대한 문제다.

 

---

1. Ordering (명시도가 같을 경우)

<style>
    .blue {
        color: blue;
    }
    .green {
        color: green;
    }
</style>
<h1 class="green blue">hi</h1>

h1은 무슨 색일까?

정답 : green

이유 : 두 css의 명시도가 같아 제일 아래에 있는 style이 적용됨

 

 

---

 

2. 명시도가 약간 높을 경우

<style>
    h1.blue {
        color: blue
    }
    .green {
        color: green
    }
</style>
<h1 class="green blue">hi</h1>

h1은 무슨 색일까?

정답 : blue

이유 : h1.blue의 명시도가 .green보다는 명시도가 더 높아서 blue가 적용됨

 

 

---

 

3. 셀렉터 선택자가 띄어쓰기가 된 경우

<style>
    h1 .blue {
        color: blue
    }
    .green {
        color: green
    }
</style>
<h1 class="green blue">hi</h1>

h1은 무슨 색일까?

정답 : green

이유 :

h1 .blue 라는 것은 위의 html 태그에는 존재하지 않는다.

이것을 적용하려면 <h1><div class="blue">hi</div></h1>과 같은 태그가 있어야 한다.

선택자 사이에 띄어쓰기가 있는 것의 의미는

바깥의 클래스가 있고,  그 내부의 자식 엘리먼트가 blue라는 클래스를 가지고 있다는 것이다.

만약에 h1.blue와 같이 선택자 사이에 띄어쓰기가 없다면 명시도가 높아져서 글자는 blue가 될 것이다.

 

---

 

4. 클래스와 타입에 대한 셀렉터 명시도를 확인하는 문제

<style>
    div.green {
        color: green
    }
    .green.blue {
        color: blue
    }
</style>
<div class="green blue">hi</div>

div내 텍스트는 무슨 색일까?

정답 : blue

이유 : [class 2개]가 [type 1개 + class 1개]보다 명시도가 더 높다.

class는 type보다 더 파워풀한 명시도를 가지고 있다.

 

---

 

5. id 셀렉터의 명시도는 센 편이다!

<style>
    #blah {
        color: cyan
    }
    div.green {
        color: green
    }
    .green.blue {
        color: blue
    }
</style>
<div id="blah" class="green blue">hi</div>

div내 텍스트는 무슨 색일까?

정답 : cyan

이유 : id 셀렉터의 명시도가 가장 높기 때문.

 

---

 

6. 상속이란 무엇일까?

<style>
    #container {
        color: cyan
    }
    div.green {
        color: green
    }
    .green.blue {
        color: blue
    }
</style>
<div id="container">
    <div class="green blue">hi</div>
</div>

div내 텍스트는 무슨 색일까?

정답 : blue

이유 : #container의 명시도가 가장 높긴하다.

하지만 자식요소의 text의 class인 .green.blue에 직접적인 color의 명시가 되어있으므로,

blue가 된다.

만약 .green.blue { color: inherit }과 같이 코드한다면

부모 요소인 #container의 프로퍼티를 상속받게 되기 때문에 cyan이 될 것이다.

 

---

 

7. 명시도 문제 + (자식 엘리먼트)

<style>
    #container .blue{
        color: blue
    }
    #container {
        color: cyan
    }
    div.green {
        color: green
    }
</style>
<div id="container">
    <div class="green blue">hi</div>
</div>

div내 텍스트는 무슨 색일까?

정답 : blue

이유 : id 셀렉터의 명시도가 가장 높음 + class를 직접적으로 선택해서 명시도가 더 높아짐.

 

---

 

8. !important

<style>
    #container .blue {
        color: blue
    }
    #container {
        color: cyan !important
    }
    div.green {
        color: green
    }
</style>
<div id="container">
    <div class="green blue">hi</div>
</div>

div내 텍스트는 무슨 색일까?

정답 : blue

이유 : !important에 속지 말 것 !

 

---

 

9. !important

<style>
    #container {
        color: cyan
    }
    div.green {
        color: green !important
    }
    .green.blue {
        color: blue;
    }
</style>
<div id="container">
    <div class="green blue">hi</div>
</div>

div내 텍스트는 무슨 색일까?

정답 : blue

이유 : !important를 믿을 것!

 

---

 

10. !important !!!!!!!!!!!!!

<style>
    #container {
        color: cyan
    }
    div.green {
        color: green !important
    }
    .green.blue {
        color: blue
    }
</style>
<div id="container">
    <div style="color: orange" class="green blue">hi</div>
</div>

div내 텍스트는 무슨 색일까?

정답 : green

이유 : 내부 style로 때려박은 것 보다 !important는 위대하다.