선택자 우선순위

앞에서 우리는 Cascade의 의미에 대해 공부하면서 CSS에 적용 우선 순위가 있다는것을 알 수 있었습니다.

이와 마찬가지로 CSS파일 안에서 사용되는 선택자들 역시 우선순위가 있는데요, 선택자 우선순위에는 3가지 원칙이 있습니다.

  1. 후자 우선의 원칙
  2. 구체성(명시도)의 원칙
  3. 중요성의 원칙

각각의 원칙에 대하여 아래에서 자세히 살펴보겠습니다.

1. 후자 우선의 원칙

동일한 선택자가 연속으로 사용되었을 경우 후자가 우선합니다.

<!DOCTYPE html>
<html lang="ko">
    <head>
        <style>
            p {
                color: red;
                font-size: 20px;
            }
    
            p {
                color: green;
            }
        </style>
    </head>
    
    <body>
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Qui, dolor voluptatem inventore deleniti eligendi omnis corporis iste adipisci consectetur ad officia quasi, doloribus fuga? Expedita error ad sunt reiciendis sapiente.
        </p>
    </body>
</html>

위의 코드에서 동일한 선택자가 연속으로 사용된것을 확인 할 수 있습니다.

두 번째 타입 선택자가 우선하기 때문에 첫 번째 타입선택자의 color 값은 두 번째 타입선택자의 color 값으로 덮어씌워집니다.

2. 구체성(Specificity)의 원칙

Specificity(명시도, 구체성으로 번역)는 특이성, 명시도 혹은 구체성으로 표기하기도 합니다. 이 교안에서는 구체성으로 표기하도록 하겠습니다.