CSS 우선순위

2020. 3. 4. 17:43

문서에 CSS를 적용한 후에 화면을 확인했을 때

내가 원하던 화면이 나오지 않은 경우가 있다.

<head>
   <style>
       section .dtl p{color:blue}
       .txt{color:red}
   </style>
</head>
<body>
   <section>
      <div class="dtl">
         <p>Test Text01</p>
         <p class="txt">Test Text02</p>
      </div>
   </section>
</body>

예를 들어 위의 소스와 같이

section 영역 아래 .dtl 태그 자식요소로 있는 p 태그에 공통으로 파란색 컬러값을 주고

css를 조금 더 깔끔하게 쓰기 위해 다른 색상을 주고 싶은 p태그에 .txt 클래스를 준 뒤

.txt클래스에 빨간색 컬러값을 주면 출력되는 화면은

위의 화면과 같이 "Test Test01"과 "Test Test02" 둘 다 파란색의 컬러값이 출력이 될 것이다.

분명 원하던 색상은 "Test Test02" 영역이 빨간색으로 출력이 되어야 하지만 그렇게 되지 않았다.

이러한 문제는 css의 우선순위에 대해 고려를 하지 않아 생긴 문제이다.

1. CSS 우선순위

위의 예제를 보면 분명 .txt라는 클래스를 사용해서 p태그에 특정 색상을 적용했지만

적용되지 않았다.

그 이유는 .txt 값 이전에 .section .dtl p의 스타일 값 때문이다.

즉, .section .dtl p 에 적용된 스타일이 더 우선순위가 높기 때문이다.

★ css 우선순위 적용되는 스타일 (1 ~7 순위)

1. !important
2. <div style=""> (인라인 스타일)
3. id (아이디값)
4. class (클래스)
5. :pseudo-class (가상 선택자)
6. tag (일반 태그)
7. * (전체 선택자)

* css의 우선순위표 (css를 입력하는 상황에 따라 점수로 계산을 한다.)

	1점	10점	100점	총점
!important	무조건 1등
#content (아이디값)	0	0	100	100
.section (클래스)	0	10	0	10
:fisrt-child (가상선택자)	0	10	0	10
p (태그)	1	0	0	1
p#content (아이디 + 태그)	1	0	100	101
#content.section (아이디 + 클래스)	0	10	100	110
p.section (클래스 + 태그)	1	10	0	11
#content .section (아이디 + 클래스)	0	10	100	110
ul li a (태그 + 태그 + 태그)	3	0	0	3
p:last-child (가상선택자 + 태그)	1	10	0	11
* (전체 선택자)	0	0	0	0

2. 실제 적용

아까 맨위에서 적용했던 "Test Text01", "Test Text02" 영역의 컬러값 적용 문제는

위의 CSS 우선순위 영역으로 확인해볼 때

section .dtl p{color:blue}  /* 클래스1 + 태그2 = 12점 */
.txt{color:red} /* 클래스1 = 10점 */

위와 같이 우선순위상 "Test Text02"의 색상값이 적용되는 p태그는 10점의 점수로

section .dtl p 영역의 스타일 값에 적용된 우선순위에서 밀리기 되므로

color:red 스타일이 적용이 되지 않았다.

이를 해결하기 위해서는 .txt에 적용한 스타일의 우선순위를 높여주거나

.section .dtl p에 적용된 우선순위를 낮추는 방법이 있겠다.

section p{color:blue}   /* 태그2 = 2점 */
.txt{color:red}   /* 클래스1 = 10점 */

3. 동일한 우선순위일 때

클래스나 태그 등 동일한 우선순위의 점수를 가지고 있는 경우엔

더 뒤쪽에 스타일이 작성된 스타일이 적용되게 된다.

<head>
   <style>
       section .dtl p{color:blue}  /* 클래스1 + 태그2 = 12점 */
       .section div p{color:red}   /* 클래스1 + 태그2 = 12점 */
   </style>
</head>
<body>
   <section class="section">
      <div class="dtl">
         <p>Test Text01</p>
         <p>Test Text02</p>
      </div>
   </section>
</body>

(더 아래쪽에 적용한 스타일인 color:red가 적용되었다.)

저작자표시

'Frontend > CSS' 카테고리의 다른 글

[css 속성] display (block, inline, inline-block, table) (0)	2020.03.06
가상 클래스 vs 가상 요소 (0)	2020.03.06
CSS 적용을 위한 또 다른 방법, @import (0)	2020.03.03
CSS Reset (초기화) (0)	2020.02.19
CSS 적용을 위한 3가지 방법 (0)	2020.02.18

About Web