[CSS] CSS 선택자 이해

화면 개발하면서 늘 헷갈리는 CSS

.class ul  : class 라는 class 의 모든 ul 하위 선택자에 적용

.class > ul : class  라는 class 의 바로 아래 자식 ul 선택자만 적용

1. CSS 명시도(Specificity) 계산법

!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]

!important선언을 사용한 형식이 가장 우선 순위가 높습니다. 그래서 다른 선언들을 덮어버릴 수 있기 때문에 꼭 필요한 곳에만 사용해야 합니다.

이를 제외한 나머지 선택자는 대괄호 "[]"안에 있는 숫자를 각각의 점수로 부여하여 우선순위를 계산합니다.

• ID 선택자의 갯수를 세어서 개당 100 으로 계산합니다. (= a)
• 클래스 선택자의 갯수를 세어서 개당 10 으로 계산합니다. (= b)
• 태그 선택자의 갯수를 세어서 개당 1 로 계산합니다. (= c)
• 공용 선택자는 모두 0으로 계산합니다. (= d)
• 가상 엘리먼트는 무시합니다.

→ a + b + c + d의 값이 높은 순서대로 스타일을 적용하는 우선순위를 가지게 됩니다. 다음의 예를 봅시다.

초록색으로 표시된 태그 선택자 3개와 빨간색으로 표시된 클래스 선택자 1개로 이루어진 스타일 규칙입니다. 우선순위 규칙에 따라 b의 값은 10×1=10이 되고, c의 값은 1×3=3이 됩니다. 따라서 이 스타일 규칙의 우선순위 값은 13입니다.

초록색으로 표시된 태그 선택자 1개와 파란색으로 표시된 ID 선택자 1개로 이루어진 스타일 규칙입니다. 우선순위 규칙에 따라 a의 값이 100×1=100이 되고, c의 값은 1×1=1이 됩니다. 따라서 이 스타일 규칙의 우선순위 값은 101입니다.

출처 : http://www.nextree.co.kr/p8468/