CSS 셀렉터

프로그래밍/HTML, CSS 2018. 4. 3. 21:14
반응형

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
방문한 링크를 선택합니다.
반응형

댓글을 달아 주세요