7. 캐스케이딩 총정리

CSS를 적용 할때 해당 내용들이 중첩 되었을 경우, 우선 순위에 따라 HTML(3) < 사용자 지정(2) < 개발자 스타일 시트(1) 순으로 지정이 됩니다.

그리고 개발자 스타일 시트 안에서도 link태그 CSS(3) < style 태그 CSS(2) < 태그 내에 작성하는 인라인 스타일CSS(1) 순으로 그 중요도가 결정 되는데요, CSS의 중요도는 다음과 같이 정리 할 수 있습니다.

1. 인라인 스타일 CSS
2. style 태그의 CSS
3. link 태그의 CSS
4. 사용자 스타일시트 (사용자 임의 정의)
5. 브라우저 스타일 시트(HTML 영역)

이러한 CSS의 캐스케이딩 우선 순위는 구체성(명시도),

1. ID 선택자 (#id)
2. 클래스 | 가상 선택자 (.class | div:nth-child() 등)
3. 태그 선택자 (p, h1 등)
4. 전체 선택자 (*)
5. 부모에게 상속받은 속성

 

See the Pen 캐스케이딩-구체성 by 종민박 (@kfwueolj-the-scripter) on CodePen.

---

하지만 이러한 우선 순위에도 불구하고 속성에 !important를 작성 할경우 해당 CSS 속성이 가장 우선적으로 컨텐츠에 적용이 됩니다.

 

See the Pen 캐스케이딩 !important by 종민박 (@kfwueolj-the-scripter) on CodePen.

---

또한 같은 선택자가 여럿이 대상을 선택 하였더라도 후순위로 지정 된 스타일이 해당 컨텐츠에 대한 CSS 적용 우선권을 가집니다.

 

See the Pen 캐스케이딩 선언순서 by 종민박 (@kfwueolj-the-scripter) on CodePen.

---

이러한 CSS의 기본 태그는 우선적으로 알아야 할 것이 같은 선택자를 지정하는 속성일 경우 뒤에 오는 선택자와 해당 속성, 값이 우선권을 갔는 것을 주의해야 하며, 선택자의 우선 순위는 인라인 스타일이 가장 최우선적으로 가지며 (!importatn→inline_style→ID → class → 태그 선택자 → * )등의 순서로 중요도를 가지며 명시도 순으로 정하면 (∞→1000→100→10→1→0)의 스코어 순입니다.

 

즉 CSS 코드에서 선택자가 구체적으로 명시 되는 정도에 따라 그 우선 순위를 가질 수 있다는 것입니다.

 

See the Pen 선택자 우선 순위1-2 by 종민박 (@kfwueolj-the-scripter) on CodePen.