영벨롭 개발 일지

[CSS]선택자 우선순위: 점수 매기기 본문

Front-end/HTML & CSS

[CSS]선택자 우선순위: 점수 매기기

영벨롭 2022. 3. 29. 13:29

선택자 우선순위란?

 

 선택자 우선순위란 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 것인지를 결정하는 방법입니다. 

 

 그 기준은 다음과 같습니다. 

 

1. 점수가 높은 선언이 우선함

 

2. 점수가 같으면, 가장 마지막에 해석된(작성된) 선언이 우선함

 

 

 

선택자 점수 매기기 

 

  • !important : 무한대

 !important 를 속성 값 옆에 작성하시면 우선순위가 가장 높게 부여됩니다. 

 

div {
	color: red !important;
}

 

  • 인라인 선언 방식 : 1000점

 인라인 선언 방식은 html 문서 내부에서 style 속성에 직접 스타일을 작성하는 방식인데요.

 

 인라인 방식으로 작성하게되면 우선순위가 너무 높기 때문에 css에서 !important를 써주지 않는 이상 다른 스타일을 덮을 수 없게 됩니다. 

 

<div>
	<p style="color: red;">Contents</p>
</div>

 

  • id 선택자 : 100점
#name {
	color: red;
}

 

  • class 선택자 : 10점
.name {
	color: red;
}

 

  • 태그 선택자 : 1점
p {
	color: red;
}

 

  • 전체 선택자 : 0점
* {
	color: red;
}

 

  • 부정 선택자 : 0점
:not(p) {
	color: red;
}

 

 

 

점수 매기기 연습

 

  • .list li.item

 이 선택자는 list 클래스의 하위 요소인 li중 클래스 이름이 item인 요소를 가리킵니다. 

 

 점수는 클래스 + 태그 + 클래스 = 10 + 1 + 10 = 21 점입니다. 

 

 

  • .list li:hover

 이 선택자는 list 클래스의 하위 요소인 li에 가상 클래스 hover를 부여한 요소를 가리킵니다. 

 

 이때 가상 클래스 hover도 클래스와 동일한 점수를 가집니다. 

 

 점수는 클래스 + 태그 + 클래스 = 10 + 1 + 10 = 21 점입니다. 

 

 

  • .box::before

 이 선택자는 box 클래스에 가상 요소 before를 가리킵니다. 

 

 일반적으로 요소는 태그로 취급하여 태그와 동일한 점수를 가집니다. 

 

 점수는 클래스 + 태그 = 10 + 1 = 11 점입니다. 

 

 

  • #submit span

 이 선택자는 id가 submit인 요소의 하위 요소 중 span 태그를 가리킵니다.

 

 점수는 id + 태그 = 100 + 1 = 101 점입니다.

 

 

  • header .menu li:nth-child(2)

 이 선택자는 header 태그의 하위 요소이면서, menu 클래스의 하위 요소 중 li 태그의 가상 클래스 nth-child를 가리킵니다. 

 

 nth-child 역시 가상 클래스이기 때문에 클래스와 동일한 점수를 가집니다. 

 

 점수는 태그 + 클래스 + 태그 + 클래스 = 1 + 10 + 1 + 10 = 22 점입니다. 

 

 

  • :not(.box)

 부정 선택자는 점수로 계산하지 않습니다. 즉, 0점이라고 계산해도 무방합니다.

 

 점수는 부정 + 클래스 = 0 + 10 = 10 점입니다.

 

 

 

 

예제

 

<!-- html -->
<body>
	<div class="hello">Hello</div>
</body>

 

 

(1) 점수가 같을 때 나중에 해석된(작성된) 스타일 적용 

 

.hello { /*10점*/
  color: green;
}

.hello { /*10점*/
  color: red;
}

 

 

(2) 점수가 높은 선택자 스타일 적용

 

div.hello { /*11점*/
  color: green;
}

.hello { /*10점*/
  color: red;
}

반응형
저작자표시 비영리 변경금지

'Front-end > HTML & CSS' 카테고리의 다른 글

[CSS] float속성과 overflow hidden속성 : 블록 요소 한 줄에 정렬하기  (0) 2022.03.31
[CSS]박스 갖고 놀기: 박스 테두리, 박스 크기, 박스 가운데 정렬, 박스 그림자  (0) 2022.03.30
[CSS] 선택자 종류 살펴보기: 기본, 복합, 가상클래스, 가상요소, 속성  (0) 2022.03.24
[CSS]CSS의 기본 문법과 선언 방식  (0) 2022.03.24
[HTML]태그의 전역 속성  (0) 2022.03.24
'Front-end/HTML & CSS' Related Articles more