[CSS] Selector Reference

Selector Reference

---

Selectors are patterns used to select the element(s) you want to style.

CSS에서 Selector(선택자)란 말 그대로 '특정 요소를 선택하는 요소'이다. 셀렉터로 특정 요소들을 선택해 그 부분에만 원하는 스타일을 적용할 수 있다. 선택자들을 적절하게 혼합해서 사용하는 것은 웹페이지를 디자인을 하는데 있어 중요하기 때문에 w3schools 문서를 참고해 어떤 선택자들이 있고, 어떻게 사용하는지 정리해보았다.

 

기본 선택자 (Selector)

Selector	Description	Example
*	모든 요소 선택	* {}
.class	특정 class 요소 선택	.intro {}
#id	특정 id 요소 선택	#only {}
element	특정 tag 요소 선택	p {}
element,element	여러개의 tag 요소 선택	div, p {}

 

복합 선택자 (Combinator Selector)

복합 선택자는 두 개 이상의 선택자들이 모인 선택자를 말한다. 하위 선택자와 자식선택자의 차이, 인접형제 선택자와 일반 형제 선택자의 차이점을 주의해서 살펴보자!

 

Selector	Description	Example
element element	하위 선택자(Descendant Combinator) : 부모 요소의 '모든' 하위요소 선택 (= 자손)	div p {}
element>element	자식 선택자(Child Combinator) : 부모 요소의 '바로 아래' 요소만 선택 (= 자식)	div > p {}
element+element	인접형제 선택자(Adjacent Sibling Combinator) : element1(형) '바로 뒤에' 오는 element2(동생)요소 선택 (사이에 다른 요소 존재시 선택X)	div + p {}
element1~element2	형제 선택자(General Sibling Combinator) : element1(형) 뒤에 오는 '모든' element2(동생)요소 선택	p ~ ul {}

 

특성 선택자 (Attribute Selector)

특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택한다. Tag 안의 특정한 속성에 조건을 지정해 선택할 수 있기 때문에 더 구체적으로 스타일을 지정할 수도 있고, 활용도가 높은 선택자이다. 기본적으로 특성 연산자는 앞에 태그이름을 적고, [대괄호] 사이에 속성 조건을 작성하는 구조로 이루어져 있다.

Selector	Description	Example
[attribute]	attribute 속성이 포함된 요소를 선택	[target] {}
[attribute=value]	attribute 속성값이 value과 일치하는 요소 선택	[target=_blank] {}
[attribute~=value]	attribute 속성값에 value가 포함되는 요소 선택  (여러개의 attribute를 공백으로 구분해 사용가능)	[title~=flower] {}
[attribute|=value]	attribute 속성값이 value거나 value-로 시작하는 요소 선택	[lang|=en] {}
[attribute^=value]	attribute 속성값이 value로 시작하는 요소 선택 (접두사)	a[href^="https"] {}
[attribute$=value]	attribute 속성값이 value로 끝나는 요소 선택 (접미사)	a[href$=".pdf"] {}
[attribute*=value]	attribute 속성값에 value가 적어도 하나 포함되는 요소 선택	a[href*="w3schools"] {}

 

가상 클래스 선택자 (Pseudo Classes Selector)

가상 클래스는 실제로 존재하지는 않지만 필요에 의해 임의로 가상의 선택자를 지정하여 사용하는 것을 말한다.

Selector	Description	Example
:active	요소에 마우스 클릭 or 키보드 엔터가 눌린 동안 선택	a:active {}
:focus	요소에 포커스되어 있는 동안 선택	input:focus {}
:hover	요소에 마우스가 올라간 동안 선택	a:hover {}
:link	방문하지 않은 링크 선택	input:checked {}
:visited	방문한 링크 선택	a:link {}
::before	요소 앞부분에 생성된 요소를 선택	p::before {}
::after	요소 뒷부분에 생성된 요소를 선택	p::after {}

 

구조 가상 클래스 선택자 (Structural Pseudo Classes Selector)

구조 가상 클래스 선택자를 사용하면 특정한 요소가 어디에, 몇번째로 위치했는지 혹은 다른 요소와의 관계에  따라서 선택할 수 있게 된다.

Selector	Description	Example
:first-child	모든 특정 태그에서 첫번째 자식요소 선택	p:first-child {}
:last-child	모든 특정 태그에서 마지막 자식요소 선택	p:last-child {}
::first-letter	모든 특정 태그에서 첫번째 글자 선택	p::first-letter {}
::first-line	모든 특정 태그에서 첫번째 줄 선택	p::first-line {}
:first-of-type	모든 특정 태그에서 첫번째 특정태그 자식요소 선택	p:first-of-type {}
:last-of-type	모든 특정 태그에서 마지막 특정태그 자식요소 선택	p:last-of-type {}
:nth-child(n)	모든 특정 태그에서 n번째 자식요소 선택	p:nth-child(2) {}
:nth-last-child(n)	모든 특정 태그에서 뒤에서부터 n번째 자식요소 선택	p:nth-last-child(2) {}
:nth-last-of-type(n)	모든 특정 태그에서 뒤에서부터 n번째 특정태그 자식요소 선택	p:nth-last-of-type(2) {}
:empty	자식요소가 없는 특정 태그 모두 선택	p:empty {}

 

UI요소 상태 선택자(The UI element states pseudo-classes)

데이터를 입력, 선택하는 폼 컨트롤 태그와 관련된 선택자들이다.

Selector	Description	Example
:enabled	모든 사용 가능한 폼 컨트롤 태그 선택	input:enabled {}
:disabled	모든 사용 불가능한 폼 컨트롤 태그 선택	input:disabled {}
:checked	체크된 폼 컨트롤 태그 선택 (<input>의 type이 'checkbox', 'radio'일 때만 사용 가능)	input:checked {}

 

기타 선택자 

Selector	Description	Example
:not	부정 선택자(Negation pseudo-class) : 특정 요소가 아닌 요소 선택	input:not([type="radio"]) {}
:valid	값이 유효한 요소 선택	input:valid {}
:invalid	값이 유효하지 않은 요소 선택	input:invalid {}