CSS 선택자(Selectors)

CSS에서 어떤 요소를 선택자로 골라서 특별한 스타일을 적용할 수 있다. 그 가운데 선택자 :root로 변수를 만드는 방법을 소개한다.

:root {  

        --bg_color: #121212; /*변수이름은 반드시 앞에 --를 붙여야 한다.*/

        --border_color: #e7e7e8

}

이제 아래와 같이 변수를 부르면 된다.

footer { 

       background-color: var(--bg_color);  /*변수를 불러서 적용하는 형식: var(--이름)*/

       border-top: 1px solid var(--border_color); 

} 

 

다른 선택자를 쓰는 방법도 같이 옮겨둔다.

선택자(Selector)	보기	보기 설명
.class	.intro	class="intro"인 모든 요소를 선택한다.
.class1.class2	.name1.name2	클래스 name1 과 name2 에 있는 모든 요소를 선택한다.
.class1 .class2	.name1 .name2	클래스 name1 의 자손이 클래스 name2 인 모든 요소를 선택한다.
#id	#firstname	id="firstname"인 요소를 선택한다
*	*	모든 요소
element	p	모든 <p> 요소를 선택
element.class	p.intro	class="intro" 안에 있는 모든 <p> 요소를 선택
element,element	div, p	모든 <div>와 모든 <p> 요소 선택
element element	div p	<div> 요소 안에 있는 <p> 요소 선택
element>element	div > p	부모가 <div> 요소인 모든 <p> 요소를 선택
element+element	div + p	<div> 요소 바로 다음에 배치되는 첫 번째 <p> 요소를 선택
:active	a:active	활성된 링크를 선택
::after	p::after	각 <p>요소 다음에 어떤 것을 삽입
::before	p::before	각 <p>요소 앞에 어떤 것을 삽입
:checked	input:checked	체크된 모든 <input> 요소를 선택
:default	input:default	기본 <input> 요소 선택
:disabled	input:disabled	비활성화된 <input> 요소 선택
:empty	p:empty	자식(텍스트 노드 포함)이 없어 비어 있는 모든 <p> 요소를 선택
:enabled	input:enabled	활성화된 모든 <input> 요소를 선택
:first-child	p:first-child	부모의 첫 번째 자식인 모든 <p> 요소를 선택
::first-letter	p::first-letter	모든 <p> 요소의 첫 글자를 선택
::first-line	p::first-line	모든 <p> 요소의 첫 번째 줄을 선택
:focus	input:focus	포커스가 있는 입력 요소를 선택
:fullscreen	:fullscreen	전체 화면 모드에 있는 요소를 선택
:hover	a:hover	링크에 마우스를 올렸을 때
:link	a:link	방문하지 않은 모든 링크
::marker	::marker	리스트 항목에서 표시된 것 선택
:nth-child(n)	p:nth-child(2)	부모의 두 번째 자식인 모든 <p> 요소를 선택. even과 odd로 짝수 번째나 홀수 번째를 선택 가능
:nth-last-child(n)	p:nth-last-child(2)	마지막 자식부터 세어 부모의 두 번째 자식인 모든 <p> 요소를 선택
:nth-last-of-type(n)	p:nth-last-of-type(2)	마지막 자식부터 세어 부모의 두 번째 <p> 요소인 모든 <p> 요소를 선택
::placeholder	input::placeholder	"placeholder" 속성이 지정된 입력 요소를 선택합니다.
:root	:root	문서의 루트 요소를 선택
::selection	::selection	사용자가 선택한 요소 부분을 선택
:visited	a:visited	이미 방문한 링크를 선택