CSS 선택자(Selector) 심화학습

CSS 선택자의 다양한 모습들

다시한번 복습하자면 CSS에서 선택자는 스타일을 적용 할 요소를 선택하는 데 사용되는 패턴이다. 지난 '기본적인 CSS 선택자 3가지' 글에서, 선택자는 요소 이름(Element Name), ID, 클래스(Class)와 같은 3가지 기본적 요소들로 선택될 수 있다고 하였다. 하지만 이 외에도 정말 다양한 선택자 정보들로 요소들을 선택 할 수 있는데, 이번 시간에는 그것들이 뭔지 알아보자. 참고로 선택자는 지원하는 CSS 레벨에 따라서 차이가 있다.

참고로 이 포스팅은 아래의 이전 글들에 이어지는 글이다.

1. CSS 소개 : CSS는 왜 Cascading Style Sheet일까?
2. CSS가 생겨난 이유 : CSS가 없던 시절의 문제
3. CSS 문법 소개 : CSS 기초 문법 2가지 구문만 알면 오케이~
4. CSS의 선택자 1편 : 기본적인 CSS 선택자 3가지

기본 선택자들(Basic Selectors)

• 전체 선택자(Universal Selector) : 이 선택자는 문서내의 모든 요소를 선택한다. *는 문서의 모든 요소와 일치한다.
• 요소 선택자(Type Selector) : HTML의 요소를 선택한다.
• 클래스 선택자(Class Selector) : 마침표(.)으로 클래스 요소 선택.
• ID 선택자(ID Selector) : 샵(#)으로 ID 요소 선택.
• 속성 선택자 (Attribute Selector) : 이 선택자는 속성 중 하나의 값에 따라 노드를 선택한다.

복합 선택자들(Combinator)

두 개 이상의 선택자 요소가 결합된 형태.

• 하위 선택자 (Descendant Selector) : ''결합자는 이전에 지정된 요소의 자식(직접 자식이 필요하지 않음)인 노드를 모두 선택한다.
• 자식 선택자(child Selector) : '>'결합자는 이전에 지정된 요소의 바로 아래에 존재하는 하위 노드만 선택한다.
• 인접 형제 선택자(Adjacent Sibling Selector) : '+'결합자는 이전에 지정된 요소 바로 다음에 오는 인접한 노드를 선택한다.
• 일반 형제 선택자(General Sibling Selector) : '~'결합자는 두 요소가 같은 부모를 공유하는 경우, 이전에 지정된 요소 뒤에 오는 모든 노드(반드시 필요하지는 않음)를 선택한다.

속성 선택자들(Attribute Selectors)

요소의 속성에 따라서 선택. 대괄호([]) 사이에 속성을 넣어서 선택함.

상태선택자(State Selector)

콜론(:) 뒤 요소를 선택.

아래는 다양한 선택자 정보 정리한 표이다. 표에서 "CSS"열은 속성이 정의 된 CSS 버전(CSS1, CSS2 또는 CSS3)을 나타낸다.

선택자	예제	예제 설명	CSS
.class	.intro	class = "intro"인 모든 요소를 선택한다.	1
#id	#firstname	id = "firstname"인 요소를 선택한다.	1
*	*	모든 요소를 선택한다.	2
element	p	모든 <p> 요소를 선택한다.	1
element,element	div, p	모든 <div> 요소와 모든 <p> 요소를 선택한다.	1
element element	div p	<div> 요소 내의 모든 <p> 요소를 선택한다.	1
element>element	div > p	부모가 <div> 요소인 모든 <p> 요소를 선택한다.	2
element+element	div + p	<div> 요소 바로 다음에 배치 된 모든 <p> 요소를 선택한다.	2
element1~element2	p ~ ul	<p> 요소 앞에 있는 모든 <ul> 요소를 선택한다.	3
[attribute]	[target]	대상 속성이 있는 모든 요소를 선택한다.	2
[attribute=value]	[target=_blank]	target = "_ blank"가있는 모든 요소를 선택한다.	2
[attribute~=value]	[title~=flower]	"flower"라는 단어가 포함 된 제목 속성이 있는 모든 요소를 선택한다.	2
[attribute|=value]	[lang|=en]	"en"으로 시작하는 lang 속성 값을 가진 모든 요소를 선택한다.	2
[attribute^=value]	a[href^="https"]	href 속성 값이 "https"로 시작하는 모든 <a> 요소를 선택한다.	3
[attribute$=value]	a[href$=".pdf"]	href 속성 값이 ".pdf"로 끝나는 모든 <a> 요소를 선택한다.	3
[attribute*=value]	a[href*="schools"]	href 속성 값에 하위 문자열 "schools"을 포함하는 모든 <a> 요소를 선택한다.	3
:active	a:active	활성화된 링크를 선택한다.	1
::after	p::after	각 <p> 요소의 내용 뒤에 무언가를 삽입한다.	2
::before	p::before	각 <p> 요소의 내용 앞에 무언가를 삽입한다.	2
:checked	input:checked	체크 된 모든 <input> 요소를 선택한다.	3
:disabled	input:disabled	비활성화 된 모든 <input> 요소를 선택한다.	3
:empty	p:empty	자식 (텍스트 노드 포함)이 없는 모든 <p> 요소를 선택한다.	3
:enabled	input:enabled	활성화 된 모든 <input> 요소를 선택한다.	3
:first-child	p:first-child	상위 요소의 첫 번째 하위 요소인 모든 <p> 요소를 선택한다.	2
::first-letter	p::first-letter	모든 <p> 요소의 첫 글자를 선택한다.	1
::first-line	p::first-line	모든 <p> 요소의 첫 번째 줄을 선택한다.	1
:first-of-type	p:first-of-type	상위 요소의 첫 번째 <p> 요소인 모든 <p> 요소를 선택한다.	3
:focus	input:focus	포커스가 있는 입력 요소를 선택한다.	2
:hover	a:hover	마우스 오버된 링크 선택	1
:in-range	input:in-range	지정된 범위 내의 값을 가진 입력 요소를 선택한다.	3
:invalid	input:invalid	값이 잘못된 모든 입력 요소를 선택한다.	3
:lang(language)	p:lang(it)	lang 속성이 "it"(이탈리아어) 인 모든 <p> 요소를 선택한다.	2
:last-child	p:last-child	부모의 마지막 하위 요소인 모든 <p> 요소를 선택한다.	3
:last-of-type	p:last-of-type	상위 요소의 마지막 <p> 요소인 모든 <p> 요소를 선택한다.	3
:link	a:link	모든 방문하지 않은 링크를 선택한다.	1
:not(selector)	:not(p)	<p> 요소가 아닌 모든 요소를 선택한다.	3
:nth-child(n)	p:nth-child(2)	부모의 두 번째 자식인 모든 <p> 요소를 선택한다.	3
:nth-last-child(n)	p:nth-last-child(2)	마지막 자식으로 부터 세어 부모의 두 번째 자식인 모든 <p> 요소를 선택한다.	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	마지막 자식으로부터 세어 부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택한다.	3
:nth-of-type(n)	p:nth-of-type(2)	부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택한다.	3
:only-of-type	p:only-of-type	부모의 유일한 <p> 요소인 모든 <p> 요소를 선택한다.	3
:only-child	p:only-child	부모의 유일한 자식인 모든 <p> 요소를 선택한다.	3
:optional	input:optional	"필수"속성이없는 입력 요소를 선택한다.	3
:out-of-range	input:out-of-range	지정된 범위 밖의 값을 가진 입력 요소를 선택한다.	3
:read-only	input:read-only	"readonly"속성이 지정된 입력 요소를 선택한다.	3
:read-write	input:read-write	"readonly"속성이 지정되지 않은 입력 요소를 선택한다.	3
:required	input:required	"required"속성이 지정된 입력 요소를 선택한다.	3
:root	:root	문서의 루트 요소를 선택한다.	3
::selection	::selection	사용자가 선택한 요소의 부분을 선택한다.
:target	#news:target	현재 활성 #news 요소 (앵커 이름이 포함 된 URL을 클릭 함)를 선택한다.)	3
:valid	input:valid	유효한 값을 가진 모든 입력 요소를 선택한다.	3
:visited	a:visited	방문한 모든 링크를 선택한다.	1