[CSS] Specificity

안녕하세요 동기 여러분! 오늘은 type vs class vs ID에 대해 싸움을 붙여봅시다!

 

Specificity

type과 class, id 모두 같이 적용한다면 무엇이 적용될까요?

 

---

 

ROUND 1

type vs class vs id

 

<h1 class='blueclass' id='greenclass'>승자는 누구인가!</h1>

type이 승리시 빨간 글씨

class가 승리시 파란 글씨

id가 승리시 초록 글씨가 나오게 설정해두었습니다.

h1 {
  color: red;
}

.blueclass {
  color: blue;
}

#greenclass {
  color: green;
}

 

결과는?

초록 글씨 id 승리!

 

id의 승리!!!

 

---

 

ROUND 2

type vs class

 

<h1 class='blueclass'>승자는 누구인가!</h1>

 

type이 승리시 빨간 글씨

class가 승리시 파란 글씨가 나오게 설정해두었습니다.

h1 {
  color: red;
}

.blueclass {
  color: blue;
}

 

결과는?

파란 글씨 class 승리!

class의 승리!!!

 

---

 

결과

id > class > type 

id가 가장 먼저 적용되고 그다음 class 그다음은 type입니다.

 

---

 

오늘의 느낌

아 저녁은 짜파게티를 먹었습니다. 미안 참깨라면ㅋㅋ