CSS 셀렉터

CSS 선택자는 HTML 문서에 스타일을 적용할 때, 스타일이 적용될 문서내의 요소를 선택하는 기능을 합니다.

 

선택자	예 / 설명	버전
.class	<style>.title {color: red;}</style> <h2 class="title">클래스 선택자</h2>	CSS1
	class="intro" 로 지정된 모든 요소를 선택합니다. class 속성에는 공백으로 분리하여 하나 이상의 스타일을 지정할 수 있습니다.
#id	<style>#title {color: red;}</style> <h2 id="title">클래스 선택자</h2>	CSS1
	id="title" 로 지정된 요소를 선택합니다. id 속성은 문서에서 한번만 나와야 합니다.
*	<style> * {color: red;}</style>	CSS2
	모든 요소들을 선택합니다.
요소	<style> p {color: red;}</style>	CSS1
	모든 <p> 요소들을 선택합니다.
요소,요소	<style> div, p {color: red;}</style>	CSS1
	모든 <div> 요소들과 모든 <p> 요소들을 선택합니다. 선택할 요소들을 , 로 분리하여 나열합니다. 요소들간의 종속관계는 없습니다.
요소 요소	<style> div p {color: red;}</style>	CSS1
	<div> 요소들 안에 있는 모든 <p> 요소들을 선택합니다. div 내에서 다른 요소들 안에 있어도 선택됩니다.
요소>요소	<style> div > p {color: red;}</style>	CSS2
	부모 요소가 <div> 인 모든 <p> 요소들을 선택합니다. 즉, div 바로 하위의 p 요소들만을 선택합니다.
요소+요소	<style> div + p {color: red;}</style>	CSS2
	<div> 요소들 바로 뒤에서 나오는 모든 <p> 요소들을 선택합니다. div 요소 바로 뒤에 나오는 p 요소 하나를 선택합니다.
요소1~요소2	<style> p ~ ul {color: red;}</style>	CSS3
	앞서 <p> 요소가 나오는 모든 <ul> 요소를 선택합니다. 같은 레벨에 p 가 나와야 하며 중간에 다른 요소가 있어도 상관이 없습니다.
[속성]	<style> [target] {color: red;}</style>	CSS2
	target 속성을 가지는 모든 요소들을 선택합니다.
[속성=값]	<style> [target="_blank"] {color: red;}</style>	CSS2
	target="_blank" 속성을 가지는 모든 요소들을 선택합니다. 대소문자를 구분하지 않습니다.
[속성~=값]	<style> [title~="flower"] {color: red;}</style>	CSS2
	title 속성의 값으로 "flower" 를 포함하는 모든 요소들을 선택합니다. 대소문자를 구분하지 않습니다.
[속성|=값]	<style> [lang|="en"] {color: red;}</style>	CSS2
	"en"으로 시작하는 lang 속성 값을 가지는 모든 요소들을 선택합니다. 속성이 값과 같거나 값 뒤에 - 로 이어진 다른값이 올 때 선택합니다. 대소문자를 구분하지 않습니다.
[속성^=값]	<style> a[href^="https"] {color: red;}</style>	CSS3
	<a> 요소들 중 href 속성의 값이 "https" 로 시작하는 모든 요소들을 선택합니다. 대소문자를 구분합니다.
[속성$=값]	<style> a[href$=".pdf"] {color: red;}</style>	CSS3
	<a> 요소들 중 href 속성의 값이 ".pdf" 로 끝나는 모든 요소들을 선택합니다. 대소문자를 구분합니다.
[속성*=값]	<style> a[href*="w3c"] {color: red;}</style>	CSS3
	<a> 요소들 중 href 속성의 값이 "w3c" 를 포함하는 모든 요소들을 선택합니다. 대소문자를 구분합니다.
:active	<style> a:active {color: red;}</style>	CSS1
	active link 를 선택합니다. 링크를 클릭한 상태가 선택됩니다.
::after	<style> p::after {content: " - 문자열 추가";}</style>	CSS2
	<p> 요소의 컨텐츠 마지막에 값을 추가합니다.
::before	<style> p::before {content: "앞에 추가";}</style>	CSS2
	<p> 요소의 컨텐츠 처음부분에 값을 추가 합니다.
:checked	<style> input:checked + label {color: red;}</style>	CSS3
	모든 체크된 <input> 요소 바로 뒤의 label 요소를 선택합니다. checked 는 checkbox와 radio 에 사용됩니다.
:disabled	<style> input:disabled {color: red;}</style>	CSS3
	모든 disabled 된 <input> 요소를 선택합니다.
:empty	<style> p:empty {border: solid 1px red;}</style>	CSS3
	자식 노드(텍스트 노드 포함)를 가지지 않는 모든 <p> 요소를 선택합니다. ::before, ::after로 추가된 컨텐츠를 고려되지 않습니다.
:enabled	<style> input:enabled {color: red;}</style>	CSS3
	모든 disabled 된 <enabled> 요소를 선택합니다.
:first-child	<style> p:first-child {color: red;}</style>	CSS2
	같은 부모를 가지는 요소들 중에서 첫 번째 <p> 요소를 선택합니다. p 요소가 가장 첫 번째로 나와야 선택됩니다.
::first-letter	<style> p::first-letter {color: red;}</style>	CSS1
	모든 <p> 요소의 첫 번째 글자가 선택됩니다.
::first-line	<style> p::first-line {color: red;}</style>	CSS1
	모든 <p> 요소의 컨텐츠중에서 첫번째 라인이 선택됩니다. 라인은 화면에 표시되는 첫 라인 입니다.
:first-of-type	<style> p:first-of-type {color: red;}</style>	CSS3
	같은 부모를 가지는 <p> 요소들 중에서 첫 번째 <p> 요소를 선택합니다. 다른 타입의 요소는 앞에 나와도 됩니다. p 요소들 중에서 가장 첫 번째를 선택합니다.
:focus	<style> input:focus {color: red;}</style>	CSS2
	포커스가 있는 input 요소를 선택합니다.
:hover	<style> a:hover {color: red;}</style>	CSS1
	링크에 마우스 오버 되면 선택되어 집니다.
:in-range	<style> input:in-range {color: red;}</style>	CSS3
	input 요소의 각이 지정된 범위내에 있으면 선택됩니다. IE 는 지원하지 않습니다. input 요소의 type="number" 일 경우 min, max 속성의 값 내에 값이 있을 경우 선택되어 집니다.
:invalid	<style> input:invalid {color: red;}</style>	CSS3
	유효하지 않은 값을 가진 모든 input 요소들을 선택합니다. input 요소의 min ~ max 범위, email 필드, number 필드 등의 값이 유효하지 않을 때 선택됩니다.
:lang(language)	<style> p:lang(it) {color: red;}</style>	CSS2
	lang 속성의 값이 "it" 인 모든 <p> 요소를 선택합니다. 속성값은 대소문자를 구분하지 않습니다.
:last-child	<style> p:last-child {color: red;}</style>	CSS3
	같은 부모를 가지는 요소들 중에서 마지막 자식 노드인 <p> 요소를 선택합니다. 모든 형제 요소들중 가장 마지막 요소여야 합니다. 즉, 마지막인 p 요소일 경우 선택되어 집니다.
:last-of-type	<style> p:last-of-type {color: red;}</style>	CSS3
	같은 부모를 가지는 <p> 요소들 중에서 마지막 <p> 요소를 선택합니다. p 인 형제들중 마지막 요소를 선택합니다.
:link	<style> a:link {color: red;}</style>	CSS1
	방문한 적이 없는 링크가 선택되어 집니다.
:not(selector)	<style> :not(p) {color: red;}</style>	CSS3
	<p> 요소가 아닌 모든 요소들을 선택합니다.
:nth-child(n)	<style> p:nth-child(2) {color: red;}</style>	CSS3
	같은 부모를 가지는 요소들 중에서 두 번째 자식 노드이면서 <p> 인 요소를 선택합니다. 타입에 상관없이 두 번째 자식 노드가 p 요소이면 선택됩니다.
:nth-last-child(n)	<style> p:nth-last-child(2) {color: red;}</style>	CSS3
	같은 부모를 가진 요소들 중에서 두 번째 자식 노드인 <p> 요소를 선택합니다. 타입에 상관없이 뒤에서 두 번째 자식 노드가 p 요소이면 선택됩니다.
:nth-last-of-type(n)	<style> p:nth-last-of-type(2) {color: red;}</style>	CSS3
	같은 부모를 가진 <p> 요소들 중에서 두 번째 <p> 요소를 선택합니다. p 요소들중의 두 번째 입니다. 다른 타입의 요소는 카운팅에서 제외 합니다.
:nth-of-type(n)	<style> p:nth-of-type(2) {color: red;}</style>	CSS3
	같은 부모를 가지는 <p> 요소들 중에서 두 번째 <p> 요소를 선택합니다.
:only-of-type	<style> p:only-of-type {color: red;}</style>	CSS3
	같은 부모를 가진 요소들중에서 <p> 요소가 하나뿐이면 선택됩니다.
:only-child	<style> p:only-child {color: red;}</style>	CSS3
	부모 요소가 자식 요소로 <p> 하나만을 가질 경우 p 요소가 선택됩니다.
:optional	<style> input:optional {color: red;}</style>	CSS3
	"required" 속성이 없는 input 요소를 선택합니다.
:out-of-range	<style> input:out-of-range {color: red;}</style>	CSS3
	지정된 범위를 벗어난 값을 가진 input 요소를 선택합니다. type="number" 인 경우
:read-only	<style> input:read-only {color: red;}</style>	CSS3
	"readonly" 속성이 지정되어 있는 input 요소를 선택합니다.
:read-write	<style> input:read-write {color: red;}</style>	CSS3
	"readonly" 속성이 지정되어 있지 않은 input 요소를 선택합니다.
:required	<style> input:required {color: red;}</style>	CSS3
	"required" 속성이 지정되어 있는 input 요소를 선택합니다.
:root	<style> :root {background: red;}</style>	CSS3
	문서의 root 요소를 선택합니다. HTML 문서에서는 html 요소가 root 요소가 됩니다.
::selection	<style> ::selection {color: red;}</style>	CSS3
	사용자에 의해 선택되어진 요소의 선택된 부분이 선택되어 집니다. 마우스로 드래그 해서 선택하는 경우입니다.
:target	<style> #news:target {color: red;}</style>	CSS3
	현재의 active #news 요소가 선택되어 집니다. (anchor 이름을 포함한 URL을 클릭하는 경우입니다.)
:valid	<style> input:valid {color: red;}</style>	CSS3
	유효한 값을 가진 모든 input 요소들을 선택합니다.
:visited	<style> a:visited {color: red;}</style>	CSS1
	방문한 링크를 선택합니다.