CSS 선택자(Selector)란?

CSS는 무엇인가?

• CSS는 Cascading Style Sheets의 약자로, html 혹은 xml로 쓰여진 문서를 어떻게 표현할 것인지를 명시하는 스타일시트(style sheet) 언어이다.
• 스타일 시트는 rule set(=rule)의 연속으로 구성된다.
• Rule set은 html 문서의 어떤 부분을 어떻게 렌더링할지 정해주는 역할을 한다.

 

[그림] Rule set

• Rule set의 선택자(selector)는 html문서의 특정 요소(element)를 참조한 다음, 그 요소에 선언 블록(declaration block)에 해당하는 내용을 적용시켜준다.

 

선택자는 어떻게 html문서의 요소를 참조하는가?

• 선택자는 일종의 패턴이다.
• 따라서 선택자의 형태를 결정하는 것이 곧 html문서의 어떤 요소를 참조하는지 결정하는 것이라고 할 수 있다.
• 선택자의 형태에 따라 어떤 요소를 참조하는지를 결정하는 규칙이 존재한다.
• 이어지는 내용은 해당 규칙을 나열한 것이다.

 

[그림] Rule set은 선택자를 통해 html 요소를 참조한다.

 

선택자의 종류

• 요소 이름과 관련된 선택자

패턴	의미
*	HTML문서 내의 모든 요소를 선택한다. 성능에 영향을 많이 준다.
E	<E>요소를 선택한다.
E.C	class=C인 <E>요소를 선택한다.
E1,E2	<E1>요소와 <E2>요소를 선택한다.
E1 E2	<E1>요소의 모든 자손 <E2>요소를 선택한다.
E1>E2	<E1>요소의 모든 자식(한 단계 밑 자손) <E2>요소를 선택한다.
E1+E2	<E1>요소의 한 단계 오른쪽 형제 <E2>요소를 선택한다.
E1~E2	<E1>요소의 모든 오른쪽 형제 <E2>요소를 선택한다.

 

 

• 클래스(class), 아이디(ID)와 관련된 선택자

패턴	의미
.C	class=C인 요소를 선택한다.
.C1.C2	class=C1 C2인 요소를 선택한다.
.C1 .C2	class=C1인 요소의 자손 요소 중 class=C2인 요소를 선택한다.
#I	id=I인 요소를 선택한다.

• 클래스와 아이디는 공통적으로 html 문서 요소의 특성(attribute)을 정의하는데 사용된다.
• 클래스는 어떤 분류안에 포함된 요소들의 공통된 특성을 정의할 때 사용된다.
• 아이디는 특정 한 요소만의 유일한 특성을 정의할 때 사용된다.
• 클래스는 속성 값을 두 개 이상 가질 수 있다. 따라서 클래스 선택자를 사용하여 한 요소가 여러 가지 특성을 가지도록 할 수 있다.
• 아이디는 속성 값을 하나만 가질 수 있다.

 

 

• 속성(attribute)과 관련된 선택자

패턴	의미
[A]	A속성이 포함된 요소를 선택한다.
[A=V]	A속성의 값이 V인 요소를 선택한다.
[A*=V]	A속성의 값이 V를 포함하는 요소를 선택한다. (서브 문자열)
[A~=V]	A속성의 값이 V를 포함하는 요소를 선택한다. (정확히 V를 포함 해야함. 띄어쓰기로 구분)
[A^=V]	A속성의 값이 V로 시작하는 요소를 선택한다.
[A|=V]	A속성의 값이 V로 시작하는 요소를 선택한다. (정확히 V와 같거나, V 바로 다음에 하이픈 "-"으로 이어져야됨)
[A$=V]	A속성의 값이 V로 끝나는 요소를 선택한다.

 

 

• 가상 클래스 선택자

패턴	의미
:empty	아무런 내용도 포함하지 않는 요소를 선택한다.
:not(E)	<E>요소가 아닌 모든 요소를 선택한다.
:nth-child(n)	부모의 n번째 자식 요소를 선택한다.
:nth-last-child(n)	부모의 뒤에서부터 n번째 자식 요소를 선택한다.
E:nth-of-type(n)	부모의 n번째 <E>요소를 선택한다.
E:nth-last-of-type	부모의 뒤에서부터 n번째 <E>요소를 선택한다.
:root	문서의 최상위(root) 요소를 선택한다.
:visited	방문한 모든 링크 요소를 선택한다.

• 가상 클래스 선택자는 html 요소에 실제로 존재하진 않지만 방문 여부나 상호 작용 여부, 상대적 위치 등에 따라 요소에 접근할 수 있도록 하는 선택자이다.
• 가상 클래스 선택자는 선택자의 패턴 앞에 ':' 이 붙는다는 특징을 가지고 있다.
• 가상 클래스 선택자는 종류가 매우 다양하기 때문에, 존재하는 가상 클래스 선택자를 모두 적지는 않았다.
• 가상 클래스 선택자에 대해 좀 더 알아보고 싶으면 다음 링크를 참조하면 된다.
• https://www.w3schools.com/cssref/css_selectors.asp

 

선택자 우선순위(precedence)

• CSS 선택자가 요소를 참조할 때, 여러 개의 선택자가 하나의 요소를 참조하면 어떤 rule set의 규칙을 적용해야 할지 모호한 상황이 발생한다.
• 이 경우에 선택자의 우선순위를 정해주어 어떤 선택자를 우선적으로 참조할 것인지 정해주는 규칙이 있다.
• 선택자의 우선순위는 rule set을 단위로 하는 것이 아닌, rule set 내부의 property를 단위로 한다는 것에 유의해야 한다.
• 선택자 우선순위 규칙은 다음과 같다.

1. Rule set의 property뒤에 !important선언이 명시된 property를 최우선적으로 참조한다.
2. 선택자의 id, class, tag에 가중치를 매겨 계산하는 specificity점수를 비교하여 높은 점수를 가지는 선택자의 property를 그다음 우선순위로 참조한다.
3. 선택자의 specificity점수가 같을 경우, 늦게 선언된 property를 우선순위로 참조한다.

• Specificity를 계산하는 공식은 다음과 같다.
• Specificity = (해당하는 id의 개수) * 100 + (해당하는 class의 개수) * 10 + (해당하는 tag의 개수) * 1

 

참고한 자료

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

https://www.w3schools.com/cssref/css_selectors.asp

http://www.nextree.co.kr/p8468/

http://tutorials.jenkov.com/css/precedence.html