선택자 우선순위

오늘 html&css 실습을 진행하다, class 선택자를 지정했는데 스타일이 적용이 안 되는 현상을 발견했다.

 

// html //
<div class="box1_top">
	<div class="item1">
    	<div class="can"></div>
        	<p class="canName">Original Cola</p>
            <div class="canPrice">1000원</div>
        </div>

==================================================================

.box1_top div {
  border: 1px solid #b5b5b6;
  border-radius: 10px;
  box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}


// css가 적용됨 //
.box1_top .item5 {
  border-radius: 10px;
  border: 3px solid var(--blue, #6327fe);
}
// css가 적용됨 //

// css가 적용되지 않음 //
.item5 {
  border-radius: 10px;
  border: 3px solid var(--blue, #6327fe);
}
// css가 적용되지 않음 //

 

그래서 구글링을 시작했다.  그러다 우연히 어떤 블로그에서 나와 같은 경험을 한 글을 보게 되었다.

 

날 괴롭힌 문제는 바로 선택자 우선순위  였다.

선택자 우선순위

요약정리

---

선택자 우선순위?

 

같은 태그가 여러 선언의 대상이 될 경우, 어떤 선언의 css속성 우선적으로 적용할 결정하는 방법이다.

 

점수가 높은 선언의 우선순위가 높다!

 

각 css 선택자를 점수별로 순위를 매겨 보았다.

 

1. important(999999999점)

2. inline style 선언(1000점)

3. id 선택자 (100점)

4. class 선택자 (10점)

5. tag 선택자 (1점)

6. *(전체) 선택자 (0점)

 

오늘 내가 겪은 코드를 예시로 점수를 매겨보자!

 

. box1_top div ==> class 선택자(10점) + tag 선택자(1점) = 11점

.box1_top . item5 ==> class 선택자(10점)  + class 선택자(10점) = 20점 // css가 적용된 코드

.item => class선택자(10점) = 10점 // css가 적용되지 않은 코드

 

더 설명이 필요 없이 점수를 비교하면 왜 내가 작성한 코드가 css 적용이 안되었는지 바로 알 수 있었다.

 

추가 조사

---

그럼 선택자 우선순위는 점수 말고 다른 것에는 영향을 받지 않을까(?)라는 생각에 조사해 봤다.

후자 우선의 원칙

동일한 선택자가 연속으로 사용되었을 경우, 가장 마지막에 적어준 선택자의 css가 적용된다

예를 들어,

 

p {
	color : red
}

p {
	color : green
}

 

위 코드를 보면 같은 선택자에 color 값만 다르게 줬다. 이런 경우 뒤에 나온 p태그의 css가 적용된다.

 

느낀 점

---

문제가 생겼을 때는 무. 조. 건 구글링이다! 한글로 검색하는 것보다 영문으로 검색할 때가 많다.

그동안 손 놓았던 영어공부를 개발공부에 지장이 안 가는 선에서 다시 공부해 봐야겠다!