On this page

CSS 규칙 우선순위

On this page

선택자에 따른 우선순위
충돌을 방지하려면
reference

HTML 엘리먼트는 다양한 CSS 규칙의 타겟이 될 수 있다. 그리고 CSS 규칙에 우선순위가 있기 때문에 그 우선순위에 따라 어느 스타일이 적용이 될지 결정된다.

선택자에 따른 우선순위

더 높은 우선순위 그룹의 규칙이 있다면 낮은 그룹의 규칙은 무시가 된다. 여섯 개의 선택자 그룹을 우선순위에 따라 정리하면 다음과 같다.

!important
인라인 스타일 속성
아이디 선택자
클래스/속성/가상 선택자
태그 선택자
전체 선택자

우선순위가 같은 선택자 그룹에 속해있다면?

규칙이 같은 선택자 그룹에 속해 있으면 선택자의 종류와 수에 따라 우선순위가 결정된다. 높은 우선순위의 선택자를 더 많이 사용한 규칙이 우선시되는 것이다.
아래 코드에서는 후자가 선택자의 종류가 더 많지만 전자는 클래스 선택자를 2개 사용하고 후자는 1개만 사용했으므로 전자의 우선순위가 더 높다. 따라서 color: blue;가 적용된다.

#introduction .message .warning span { color: blue; }
#introduction .message div p sapn { color: red ;}

코드 위치에 따른 우선순위

규칙이 같은 선택자 그룹에 속하고, 같은 순위의 선택자를 같은 수만큼 사용한다면 위치에 따라 결정이 된다. 우선순위가 높은 위치에 있는 규칙이 낮은 위치에 있는 규칙을 덮어쓴다.

<head> 내부의 <style> 내부
<style> 내부 @import 문으로 삽입한 CSS 파일
<link>로 연결한 CSS 파일
<link>로 연결한 CSS 파일 내부의 @import 문
마지막으로 연결한 CSS 파일
- !important 규칙은 예외다. (1순위임)
브라우저의 기본 스타일

같은 코드 위치에 연결(삽입)된 경우 순서에 따라 우선순위가 결정된다. 나중에 연결(삽입)된 스타일이 우선순위가 높다.

충돌을 방지하려면

CSS 코드를 작성하는 동안 하나의 요소에 동일한 속성이 여러 번 적용되는 충돌 규칙을 작성하기 쉽다. 이를 방지하려면,

엘리먼트가 웹페이지에 단 한번 나타나더라도, id 대신 class 사용하기
HTML 엘리먼트 하나가 여러 클래스를 갖고 있는 것을 피하기
inline style 사용하지 않기

Tags