CSS 선택자 우선순위

안녕하세요! 이번에는 웹 디자인을 할 때 중요한 개념인 CSS 선택자의 우선순위에 대해 알아보겠습니다. CSS 선택자의 우선순위는 여러 CSS 규칙이 동일한 요소에 적용될 때 어떤 규칙이 우선적으로 적용될지를 결정합니다.

CSS 선택자의 우선순위 기준

CSS 선택자의 우선순위는 크게 다음의 4가지 기준에 따라 결정됩니다.

• 중요성 (!important): !important가 붙은 스타일 규칙은 다른 어떤 규칙보다 우선합니다.
• 인라인 스타일: HTML 요소에 직접 적용된 스타일은 다른 외부 CSS 규칙보다 우선합니다.
• 선택자의 명시도: 선택자의 명시도는 선택자가 특정 요소를 얼마나 구체적으로 가리키는지에 따라 결정됩니다. ID 선택자는 클래스 선택자보다, 클래스 선택자는 태그 선택자보다 우선순위가 높습니다.
• 소스 순서: 위의 세 가지 기준이 같을 경우, 나중에 선언된 스타일 규칙이 우선 적용됩니다.

선택자의 명시도 계산하기 선택자의 명시도는 다음과 같이 계산됩니다.

• ID 선택자의 수
• 클래스 선택자, 속성 선택자, 가상 클래스 선택자의 수
• 태그 선택자와 가상 요소 선택자의 수

예를 들어, #header .nav .item a라는 선택자는 1개의 ID 선택자, 2개의 클래스 선택자, 그리고 1개의 태그 선택자로 구성되므로 명시도는 (1, 2, 1)이 됩니다.

실습

결론

CSS 선택자의 우선순위는 웹페이지의 스타일을 결정하는 중요한 요소입니다. 여러 CSS 규칙이 동일한 요소에 적용될 때 어떤 규칙이 우선 적용될지를 정하는 이 우선순위를 이해하면, 웹페이지의 스타일을 보다 효과적으로 제어할 수 있습니다.