[css] css 적용 우선순위

프로젝트를 진행 중, 클래스를 먹여도 적용이 안 됐다.

클래스 여러 개 넣어서 그런 줄 알았는데 속성들 중에도 우선순위가 중요하다는 것을 깨달았다.

그래서 오늘은 우선순위에 대해서 정리하고자 한다.

 

📌 CSS 우선순위 3가지 규칙

1. 기본적으로 뒤에 나오는 css가 우선순위가 높다. 
2. !important > inline style attribute > id > class, 다른 attribute, Pseudo 클래스(:first-child같은 것) > tag element, Pseudo 엘레먼트(::before같은 것) 순으로 우선순위가 높다.
3. 우선순위가 같다면 개수가 많은 css가 우선순위가 높다.

 

!important와 inline style attribute은 실무에서 사용을 제한하는 경우가 많다. !important는 css 값 뒤에 붙여진 키워드를 의미하고, 인라인 스타일 속성은 태그에 주어진 style 속성 내용을 가리킨다. 이 두 가지는 최후의 수단이다.

 

📌 우선순위가 다를 경우

id, class, tag 순위 산출 방식은 올림픽의 금은동 메달이라고 생각하면 된다. id가 금메달, class 같은 기타 속성이 은메달, 태그 이름이 동메달이다. 올림픽에서는 금메달 1개가 은메달 100개보다 우선순위가 높다. (한국식 순위 산출 방법)

id 선택자에 css가 붙어있으면 class 여러 개에 css가 붙어있어도 id 선택자가 먼저 적용된다.

 

📌 우선순위가 같을 경우
우선순위가 같다면 개수로 순위가 정해진다. (메달 개수)

class 하나에 달린 css보다 class 두 개에 달린 css 우선순위가 더 높다.

개수마저 같다면 뒤에 나오는 것이 순위가 높다.

CSS 이름 자체가 Cascading Style Sheet이며 이름대로 뒤에 나오는 CSS가 앞에 나오는 CSS를 덮어 씌운다는 뜻이다.