CSS) 선택자 우선 순위

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

선택자 우선 순위

 

(우선 순위 높음)

!important

inline 속성

 

a : #id

b : .class, attribute, pseudo-class

c : tag, pseudo-element

(우선 순위 낮음)

---

HTML 코드

    <h1>우선순위</h1>
    <!-- p#myp.group[title='오늘의 한문장']>lorem -->
    <p id="myp" class="group" title="오늘의 한문장" style="color: slateblue">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veniam fuga laborum libero inventore. Harum, doloribus, adipisci labore laborum quas velit, quidem architecto cumque animi vel minus voluptas culpa ad ipsum.</p>

 

CSS 코드

    <style>
        p {color: burlywood;}
        .group {color:yellow}
        #myp {color: tomato;}
    </style>

우선순위가 가장 낮은 <p>태그는 가장 먼저 코드 작성을 했지만, 맨 아래에 있는 것을 확인할 수 있으며

해당 코드 중에서 우선 순위가 가장 높은 inline요소의 slateblue color가 적용 된 것을 확인할 수 있습니다.

 

이번엔 p태그의 style 속성을 !important로 지정하였습니다.

    <style>
        p {color: burlywood !important;}
        .group {color:yellow}
        #myp {color: tomato;}
    </style>

!important는 우선순위가 가장 높으므로, 우선순위가 낮았던 <p>태그에 !important를 적용하니 <p>태그의 burlywood color가 적용된 것을 확인할 수 있습니다.

 

 

 

※ 우선순위 관련 링크

https://www.w3.org/TR/selectors-3/#specificity

Selectors Level 3