CSS 우선순위

학습 목적

• 웹페이지 클론 코딩 중 CSS를 입력해도 적용이 되지 않는 경우가 발생. 이 문제를 빠르게 고치기 위해
• 강의를 들으며 프론트엔드 개발자에게 CSS도 많이 중요하다 느낌
• 개발중인 블로그에 잘 적용하기 위해

---

CSS란?

CSS(Cascading Style Sheets)는 HTML, XHTML, XML같은 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어이다. 글꼴, 배경색, 너비와 높이 등을 지정하는 역할을 한다.

웹사이트를 제작하다보면 하나의 태그에 여러가지 CSS를 적용시켜야할 상황이 오게된다.
이때 특정한 규칙에 따라 CSS에 우선 순위가 부여되어 적용되는데 지금부터 알아보도록 하자.

CSS 규칙

• !important > 인라인 스타일 > ID 선택자 > CLASS 선택자, 속성 기반 선택자, 가상 클래스, 가상 요소> 태그 선택자, 전체 선택자
• 같은 우선순위라면 뒤에 나오는 CSS의 우선순위가 높음

우선 순위(점수) 계산 방법

• !important : ∞ - 속성 기준 가장 우선

!import를 사용하게 되면 우선순위가 가장 높게 부여됨

div {
	background-color: orange !important;
}

• 인라인 스타일 : 1000점 - 요소 기준 가장 우선

HTML 문서 내부 style 속성에 직접 스타일을 작성하는 방식

<div style = "background-color: orange;"></div>

!important를 제외하고 다른 스타일을 적용할 수 없음

• ID 선택자 : 100점

#name{
	background-color: orange;
}

• CLASS 선택자 : 10점

.name{
	background-color: orange;
}

• 속성 기반 선택자 : 10점

a[title] {
   background-color: orange;
}

• 가상 클래스 : 10점

선택자 뒤에 :를 붙이면 특정 이벤트마다 적용 할 스타일 설정 가능

a:hover {
   background-color: orange;
}

li:nth-child(3) {
   color: red;
}

• 가상 요소 : 10점

첫 번째 줄이나 첫 글자와 같이 선택한 요소 일부분에 스타일 적용 가능
효과를 보려면 반드시 블록 레벨 요소에 적용해야 함

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

• 태그 선택자 : 1점

p {
	color: red;
}

• 전체 선택자 : 0점

* {
	color: red;
}

연습

• .a li.item
  a 클래스의 하위요소인 li중 클래스 이름이 .item인 요소를 가리킴
  클래스(10점) + 태그(1점) + 클래스(10점) = 21점
• #submit p:hover
  id가 submit인 요소의 하위 요소들 중 p태그에 가상 클래스 hover를 부여한 요소를 가리킴
  id(100점) + 태그(1점) + 가상 클래스(10점) = 111점

적용

<div>
	<span class = "myClass">Class</span>
</div>

(1)

.myClass {
	color : blue;
}
.myClass {
	color : orange;
}

둘은 10점으로 점수가 같으므로 나중에 작성된 스타일로 적용되어 글씨가 오렌지색으로 적용된다.
(2)

span.myClass {
	color : blue;
}
.myClass {
	color : orange;
}

11점 10점으로 점수가 높은 스타일로 적용되어 글씨가 파란색으로 적용된다.

정리

선택자 방식적용 예선택자 우선 순위혼용 방식의 점수 산정비고

!important	속성: 적용 값 !important	속성 기준 가장 우선	속성 기준 가장 우선	속성 기준 가장 우선
인라인 스타일	style=””	1	요소 기준 가장 우선	요소 기준 가장 우선
ID 선택자	#selector	2	100
CLASS 선택자	.selector	3	10
속성 기반 선택자	a[title]	3	10
가상 클래스	a:hover	3	10	#header > .logo > a { }
가상 요소	span::after	3	10
태그 선택자	a	4	1
전체 선택자	*	5	0

참고 링크
선택자(Selector)의 우선 순위
가상 클래스 선택자
의사요소
반드시 기억해야 하는 CSS 선택자
[CSS]선택자 우선순위: 점수 매기기
CSS 적용 우선순위