CSS 선택자 우선순위

Joah·2022년 5월 24일
0

CSS

목록 보기
6/8

선택자 우선순위 점수

CSS 선택자를 어떻게 작성했느냐에 따라서 적용되는 스타일이 결정된다.

점수가 높은 순서대로 작성

1. !important → 무한대(가장 높은 점수)
2. style 속성을 html에 인라인 선언 → 1000점
3. id 선택자 # → 100점
4. class 선택자 . → 10점
5. 태그 선택자 → 1점
6. * 전체 선택자 → 0점

  • 점수가 높으면 선언이 우선한다.

  • 만약 점수가 같다면, 가장 마지막에 작성된 코드가 우선한다.

  • !important의 남용을 지양하자. 나중에 더 높은 우선순위를 가져야 하는 요소에 스타일을 적용할 때 !important를 적용한 이전의 요소들을 모두 찾아서 변경해야 하기 때문이다.

  • html에 직접 style을 태그 안에 적용하면 의도하지 않게 해당 스타일을 우선시 하기 때문에 추후 같은 태그에 다른 스타일을 적용할 때 한 번 더 확인해야 하기 때문에 유지 보수가 어렵다.

  • 부모 요소로부터 받은 상속된 속성은 점수로 계산하지 않는다.


예제

<body>
  <div class="color">안녕하세요</div>
  <style>
    .color {
      color: red;
   	}
    .color {
      color: green;
   	}
  </style>
</body>

과연 위의 '안녕하세요'는 무슨 색상을 가질까?'

왜?

.color 태그 두개 모두 class를 선택자로 사용했기 때문에 10점을 가진다.
같은 점수를 가질 때는 마지막에 작성된 코드가 우선하기 때문에 green 이 선택된다.

profile
Front-end Developer

0개의 댓글