#8. CSS 선택자(Selector) – 복합선택자 / 가상 클래스 선택자

• Article author: axce.tistory.com
• Reviews from users: 16321 Ratings
• Top rated: 4.9
• Lowest rated: 1
• Summary of article content: Articles about #8. CSS 선택자(Selector) – 복합선택자 / 가상 클래스 선택자 CSS 선택자(Selector)란? … 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있게 됩니다. 바로 예제 … …
• Most searched keywords: Whether you are looking for #8. CSS 선택자(Selector) – 복합선택자 / 가상 클래스 선택자 CSS 선택자(Selector)란? … 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있게 됩니다. 바로 예제 … CSS 선택자(Selector)란? 선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있게 됩니다. 바로 예제로 들어가보도록 하겠습니다. 아래 예제들은 codepen(Click!)..
• Table of Contents:

CSS 선택자(Selector)란

태그

‘FrontEndCSS’ Related Articles

티스토리툴바

Read More

See more articles in the same category here: Top 287 tips update new.

CSS / 선택자(Selector)

전체 선택자(Universal Selector)

전체 선택자(Universal Selector)는 모든 HTML 요소를 선택합니다. 별표(*)로 나타냅니다.

예를 들어 다음은 모든 요소의 색을 파란색으로 만듭니다.

* { color: blue; }

다른 선택자와 같이 사용할 때는 생략할 수 있습니다. 즉, 다음 두 줄은 같은 결과를 만듭니다.

*.abc { color: blue; } .abc { color: blue; }

타입 선택자(Type Selector)

타입 선택자(Type Selector)는 h1, p, div, span 등 HTML 요소(Element)를 선택하는 선택자입니다.

예를 들어 다음은 HTML 문서 안에 있는 모든 p 요소의 내용을 파란색으로 만듭니다.

p { color: blue; }

속성 선택자(Attribute Selector)

속성 선택자(Attribute Selector)는 특정 속성(attribute)을 갖고 있거나 특정 속성이 특정 값 등을 갖고 있는 요소(element)를 선택합니다.

[attributename]

attributename 속성을 가진 요소를 선택합니다.

예를 들어 다음은 title 속성을 가진 h1 요소를 선택합니다.

h1[title] [attributename=”value”]

attributename 속성의 값이 value인 요소를 선택합니다.

예를 들어 다음은 title 속성의 값이 abc인 h1 요소를 선택합니다.

h1[title=”abc”]

주의할 점은 속성값이 정확히 일치해야 한다는 것입니다.

예를 들어 다음은 선택되지만,

Lorem

다음은 선택되지 않습니다.

Lorem

[attributename~=”value”]

attributename 속성의 값이 value를 포함한 요소를 선택합니다.

예를 들어 다음은 title 속성의 값이 abc를 포함한 h1 요소를 선택합니다.

h1[title~=”abc”]

포함 여부는 단어 기준으로 판단합니다.

예를 들어 다음은 선택되지만,

Lorem

다음은 선택되지 않습니다.

Lorem

[attributename|=”value”]

attributename 속성의 값이 value이거나 value-로 시작하는 요소를 선택합니다.

예를 들어 다음은 title 속성의 값이 abc이거나 abc-로 시작하는 h1 요소를 선택합니다.

h1[title|=”abc”]

다음은 선택되고,

Lorem

Lorem

다음은 선택되지 않습니다.

Lorem

[attributename^=”value”]

attributename 속성의 값이 value로 시작하는 요소를 선택합니다.

예를 들어 다음은 title 속성의 값이 abc로 시작하는 h1 요소를 선택합니다.

h1[title^=”abc”]

단어 기준이 아니라 문자열 기준입니다. 따라서 다음 모두 선택됩니다.

Lorem

Lorem

[attributename$=”value”]

attributename 속성의 값이 value로 끝나는 요소를 선택합니다.

예를 들어 다음은 title 속성의 값이 abc로 끝나는 h1 요소를 선택합니다.

h1[title$=”abc”]

단어 기준이 아니라 문자열 기준입니다. 따라서 다음 모두 선택됩니다.

Lorem

Lorem

[attributename*=”value”]

attributename 속성의 값이 value를 포함한 요소를 선택합니다.

예를 들어 다음은 title 속성의 값이 abc를 포함한 h1 요소를 선택합니다.

h1[title*=”abc”]

포함 여부는 문자열 기준으로 판단합니다. 따라서 다음 모두 선택됩니다.

Lorem

Lorem

Lorem

아이디 선택자(ID Selector)

아이디 선택자(ID Selector)는 특정 값을 id 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 #을 붙여 아이디임을 나타냅니다.

예를 들어 다음은 id 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다.

#abc { color: red; }

클래스 선택자(Class Selector)

클래스 선택자

클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택합니다. 속성값 앞에 .을 붙여 클래스임을 나타냅니다.

예를 들어 다음은 class 속성값으로 abc를 갖는 요소를 빨간색으로 만듭니다.

.abc { color: red; }

클래스 선택자 앞에 아무 것도 없으면

클래스 선택자 앞에 아무 것도 없으면 그 값을 갖는 모든 요소를 선택합니다. 즉 .abc는 *.abc와 같은 의미로 다음 모두를 선택합니다.

Lorem

Lorem

클래스 선택자 앞에 무언가 있으면

클래스 선택자 앞에 무언가 있으면 모두 만족하는 요소를 선택합니다.

예를 들어 다음은 class 값으로 abc를 갖는 p 요소를 선택합니다.

p.abc {}

따라서 다음은 선택되지 않고,

Lorem

다음은 선택됩니다.

Lorem

클래스 속성의 값이 여러 개이면

class 속성은 여러 개의 값을 가질 수 있습니다.

Lorem

이 경우 CSS에 정의된 순서대로 적용됩니다. 예를 들어 다음의 두 문단은 모두 빨간색으로 나옵니다. CSS에서 .abc를 먼저 .xyz를 나중에 정의했기 때문입니다.

Lorem Ipsum Dolor.

Lorem Ipsum Dolor.

하위 선택자(Descendant Selector)

하위 선택자(Descendant Selector)는 특정 요소의 하위에 있는 요소를 선택합니다.

예를 들어 다음은 div 요소의 하위에 있는 blockqoute 요소를 선택합니다.

div blockquote

이때 div와 blockquote 사이에 요소가 더 있어도 선택이 됩니다. 즉 다음과 같을 때도 blockquote를 선택하고,

…

다음과 같을 때도 blockquote를 선택합니다.

자식 선택자(Child Selector)

자식 선택자(Child Selector)는 특정 요소의 자식 요소를 선택합니다.

예를 들어 다음은 div 요소의 자식 요소 중 blockqoute를 선택합니다.

div > blockquote

주의할 점은 한단계 아래에 있는 요소만 선택한다는 것입니다. 즉 다음과 같을 때는 blockquote를 선택하지만,

…

다음과 같을 때는 blockquote를 선택하지 않습니다.

형제 선택자(Sibling Selector)

형제 선택자(Sibling Selector)는 어떤 요소의 형제 요소를 선택하는 선택자입니다.

예를 들어 다음은 h1 요소의 형제 요소 중 p 요소를 선택합니다.

h1 ~ p

인접 형제 선택자(Adjacent Sibling Selector)

인접 형제 선택자(Adjacent Sibling Selector)는 어떤 요소의 형제 요소 중 첫 번째 요소를 선택합니다.

예를 들어 다음은 h1 요소의 형제 요소 중 첫번째 p 요소를 선택합니다.

h1 + p

가상 요소(Pseudo-elements)

가상 요소(Pseudo-elements)는 요소의 특정 부분을 선택합니다.

::first-line

::first-line은 요소의 첫 번째 줄을 선택합니다.

예를 들어 다음은 p 요소의 첫 번째 줄의 글자색을 빨간색으로 만듭니다.

p::first-line { color: red; }

::first-letter

::first-letter는 요소의 첫 번째 문자를 선택합니다.

예를 들어 다음은 p 요소의 첫 번째 문자의 색을 빨간색으로 만듭니다.

p::first-letter { color: red; }

::before

::before는 요소의 앞을 선택합니다.

예를 들어 다음은 p 요소 앞에 xyz라는 단어를 넣고 색을 빨간색으로 만듭니다.

p::before { content: “xyz”; color: red; }

::after

::after는 요소의 뒤를 선택합니다.

예를 들어 다음은 p 요소 뒤에 xyz라는 단어를 넣고 색을 빨간색으로 만듭니다.

p::after { content: “xyz”; color: red; }

::selection

::selection은 마우스 드래그 등으로 선택한 텍스트를 선택합니다.

가상 클래스(Pseudo-class)

:empty

:empty는 내용이 없는 비어있는 요소를 선택합니다.

예를 들어 다음은 li 요소 중 내용이 없는 것을 선택합니다.

li:empty

공백도 내용이 있는 것으로 봅니다. 따라서 다음처럼 빈 칸이 있는 것은 선택되지 않습니다.

:first-child

:first-child는 형제 요소 중 첫 번째 요소를 선택합니다.

:hover

:hover는 요소에 마우스를 올린 상태를 선택합니다.

예를 들어 다음은 p 요소에 마우스를 올렸을 때 글자색을 빨간색으로 만듭니다. 마우스를 다른 곳으로 이동하면 원래 모양으로 돌아옵니다.

p:hover { color: red; }

:nth-child()

:nth-child()는 형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용합니다.

문법

:nth-child( an+b )

a와 b는 정수입니다. 0과 음수도 가능합니다.

n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 대입됩니다.

an+b 대신에 even, odd를 넣을 수도 있습니다.

예제

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

n에 0, 1, 2, 3, …을 대입하면 3n+2은 2, 5, 8, 11, …이 됩니다. li 요소 중 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-child( -2n+5 ) { color: red; }

a를 음수로 정하면 선택하는 요소의 개수를 정할 수 있습니다. n이 0일 때 5, n이 1일 때 3, n이 2일 때 1이므로, 세 개의 홀수번째 요소가 선택됩니다.

li:nth-child( 5 ) { color: red; }

a가 0이면 n에 어떤 값이 들어가도 b입니다. 0n+b라고 해도 되고, 그냥 b만 써도 됩니다. 위와 같이 하면 5번째 요소가 선택됩니다.

an+b 대신에 odd을 쓰면 홀수번째 요소가, even을 적으면 짝수번째 요소가 선택됩니다.

:nth-last-child()

:nth-last-child()는 형제 요소 중에서 특정 순서에 있는 요소를 선택할 때 사용합니다. :nth-child()와 다른 점은 뒤에서 부터 센다는 것입니다.

문법

:nth-last-child( an + b )

a와 b는 정수입니다. 0과 음수도 가능합니다.

n에는 음이 아닌 정수, 즉 0, 1, 2, 3, …이 차례대로 대입됩니다.

an+b 대신에 even, odd를 넣을 수도 있습니다.

예제

• 10
• 9
• 8
• 7
• 6
• 5
• 4
• 3
• 2
• 1

li 요소 중 뒤에서부터 3번째에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-last-child( 2n ) { color: red; }

n에 0, 1, 2, 3, …을 대입하면 2n은 0, 2, 4, 6, …이 됩니다. li 요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-last-child( 3n – 1 ) { color: red; }

n에 0, 1, 2, 3, …을 대입하면 3n-1은 -1, 2, 5, 8, …이 됩니다. li 요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-last-child( n + 8 ) { color: red; }

n에 0, 1, 2, 3, …을 대입하면 n+8은 8, 9, 10, …이 됩니다. li 요소 중 뒤에서부터 그 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-last-child( even ) { color: red; }

li 요소 중 뒤에서부터 짝수번째 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

li:nth-last-child( odd ) { color: red; }

li 요소 중 뒤에서부터 홀수번째 순서에 있는 것을 선택하고 빨간색으로 만듭니다.

CSS – 선택자 (Selector) 종류 + 선택자에 사용가능한 문자 (= 선택자 이름짓기 주의사항) > CSS

목차

※ 선택자는 스타일 입힐 대상 결정하는 거라, CSS에서 가장 중요.

※ JS, JQUERY 언어에서도 사용하므로, 자세히 공부하시기 바람.

※ 선택자는 단독 또는 다른 선택자와 결합해서 사용 가능함.

, (쉼표) 기호로 위 선택자를 한번에 열거 가능. a, div, #hz {color:red;}

PS2, , (쉼표) 기호로 위 선택자를 한번에 열거 가능. a, div, #hz {color:red;}

PS1. 번역자마다 용어가 다르니, 각 예제 통해서 정확한 쓰임새 이해 권장.

언더스코어(_)와 하이픈(-) 제외한 특수문자 사용 불가.

영문대소문자와 숫자 조합 권장. 단, 숫자로 시작 불가.

모든 자연어(예: 한글・일본어・영어…)를 사용 가능.

.class

(예) .hz 경우, class = “hz” 속성 갖는 모든 요소 선택.

.class1.class2

(예) .hz1.hz2 경우, hz1 hz2 두 클래스를 모두 갖는 요소 선택.

.class1 .class2

(예) .hz1 .hz2 경우, hz1 가진 요소의 자손 중 hz2 갖는 모든 요소 선택.

#id

(예) #hz 경우, id = “hz”인 요소 선택. ※ 유일해야 함.

*

(예) * 경우, 모든 요소 선택.

element

(예) p 경우, 모든

요소 선택.

element.class

(예) p.hz 경우, class = “hz” 가진 모든

요소 선택.

element, element

(예) div, p 경우, 모든

요소와 모든

요소 선택.

element element

(예) div p 경우,

요소 내의 모든

요소 선택.

element > element

(예) div > p 경우, 부모가

요소인 모든

요소 선택.

element + element

(예) div + p 경우,

요소 바로 뒤에 배치된 모든

요소 선택.

element1 ~ element2

(예) p ~ ul 경우,

요소 뒤에 배치된 모든 형제

요소 선택.
[attribute]

(예) [target] 경우, target 속성이 있는 모든 요소 선택.

[attribute=value]

(예) [target = _blank] : target = “_ blank”인 모든 요소 선택.

[attribute~=value]

(예) [title~=hz] 경우, title 속성의 속성값에 “hz” 포함된 모든 요소 선택.

단, hz 단독이거나 앞뒤로 공백이여야 함.

[attribute|=value]

(예) [title|=hz] : title 속성의 속성값이 해당 문자인 “hz” 또는 바로 뒤 언더바(_)가 오는 “hz-“로 시작하는 모든 요소 선택.

단, 단어 중 일부이거나 뒤에 공백이나 언더바(_) 포함된 경우엔 해당 X.

[attribute^=value]

(예) a [href^=”https”] 경우, href 속성값이 “https”로 시작하는 모든 요소를 선택.

[attribute$=value]

(예) a [href $= “. pdf”] 경우, href 속성값이 “.pdf”로 끝나는 모든 요소 선택.

[attribute*=value]

(예) a [href * = “homzzang”] 경우, href 속성값에 “homzzang” 하위 문자열이 포함된 모든 요소 선택.

:active

(예) a:active 경우, 요소 클릭하는 순간 선택.

::after

(예) p::after 경우, 모든

요소의 뒤 부분 선택.

::before

(예) p::before 경우, 모든

요소의 앞 부분 선택.

:checked

(예) input:checked 경우, checked 속성 갖는 요소 선택.

※ type 속성이 checkbox , radio인 요소만 checked 속성 가능.

:default

(예) input:default 경우, 처음부터 기본 checked 된 요소 선택.

:disabled

(예) input:disabled 경우, disabled (비활성화)된 모든 요소 선택.

:empty

(예) p:empty 경우, 자식 없는 모든

요소 선택. (텍스트 노드 포함).

:enabled

(예) input:enabled 경우, 모든 활성화 된 요소 선택.

:first-child

(예) p:first-child 경우, 부모의 첫 번째 자식인 모든

요소 선택.

::first-letter

(예) p::first-letter 경우, 모든

요소의 첫 글자 선택.

::first-line

(예) p::first-line : 모든

요소의 첫 라인 선택.

:first-of-type

(예) p:first-of-type : 부모의 첫 번째 p 타입 요소인 모든

요소 선택.

:focus

(예) input:focus 경우, input 요소에 포커스 된 경우 선택.

※ 포커스 : 해당 요소 선택해 해당 요소 위에서 커서가 깜빡감빡 중인 상태.

:hover

(예) a:hover 경우, a 요소 위에 허버 된 경우 선택.

※ 허버 : 해당 요소 위에서 마우스커서가 머무는 상태.

:in-range

(예) input:in-range : 지정 범위 내의 값 갖는 input 요소 선택.

즉, type=”number” 설정된 input 요소의 value 값이 (min ≤ value ≤ max)인 요소 선택.

:indeterminate

(예) input:indeterminate 경우, 불확정 상태에 있는 input 요소 선택.

:invalid

(예) input: invalid : type 속성의 속성값과 부합 않는 값 갖는 요소 선택.

:lang (language)

(예) p:lang(ko) : lang (언어)속성이 “ko”(한국어)인 모든

요소 선택.

:last-child

(예) p: last-child 경우, 부모의 마지막 자식인 모든

요소 선택.

:last-of-type

(예) p:last-of-type 경우, 부모의 마지막 p 타입 요소인 모든

요소 선택.

:link

(예) a:link 경우, 방문하지 않은 모든 요소 선택.

:not(selector)

(예) :not(p) 경우,

요소가 아닌 모든 요소 선택.

:nth-child(n)

(예) p:nth-child(2) 경우, 부모의 두 번째 자식인 모든

요소 선택.

:nth-last-child(n)

(예) p:nth-last-child(2) 경우, 마지막 자식부터 계산하여 부모의 두 번째 자식인 모든

요소 선택.

:nth-last-of-type(n)

(예) p:nth-last-of-type(2) 경우, 마지막 자식부터 세어 부모의 두 번째 p타입의 모든

요소 선택.

:nth-of-type(n)

(예) p:nth-of-type(2) 경우, 부모의 두 번째 p타입의 모든

요소 선택.

:only-of-type

(예) p:only-of-type : 부모의 유일한 p타입의 모든

요소 선택.

:only-child

(예) p:only-child 경우, 부모의 유일한 자식인 모든

요소 선택.

:optional

(예) input:optional 경우, required 속성 없는 모든 input 요소 선택.

:out-of-range

(예) input:out-of-range 경우, 지정 범위 밖의 값 갖는 input 요소 선택.

즉, type=”number” 설정된 input 요소의 value 값이 (min ≤ value ≤ max) 아닌 요소 선택.

::placeholder

(예) input::placeholder 경우, placeholder 속성에 텍스트 있는 input 요소 선택.

:read-only

(예) input:read-only 경우, readonly (읽기전용) 속성 갖는 input 요소 선택.

:read-write

(예) input:read-write 경우, readonly (읽기전용) 속성 안 갖는 input 요소 선택.

:required

(예) input:required 경우, requied (필수입력) 속성 갖는 input 요소 선택.

:root

(예) :root 경우, 웹문서의 최상위 요소 선택.

::selection

(예) :: selection 경우, 사용자가 요소 안에서 더블클릭이나 드래그로 선택한 부분을 선택.

:target

(예) #hz:target 경우, 클릭 시, 목적지 #hz 요소 선택.

:valid

(예) input:valid 경우, 지정 type에 부합하는 값 갖는 모든 input 요소 선택.

:visited

(예) a:visited 경우, 이미 클릭해서 방문한 모든 링크 선택.

728×90

반응형

CSS 선택자(Selector)란?

선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택해 스타일을 적용할 수 있게 됩니다. 바로 예제로 들어가보도록 하겠습니다.

아래 예제들은 codepen(Click!)에 코드를 붙여넣어 어떻게 실행이 되는지 확인할 수 있습니다.

복합선택자

일치선택자::

조건을 만족해야 선택이 됩니다.

선택자가 span.orange인 경우에는 태그가 이면서 orange라는 클래스를 가지고 있어야 적용이 됩니다.

/* css */ span.orange { color: red; }

• 사과
• 딸기
• 오렌지

당근

토마토

자식선택자::

자식 요소를 선택합니다. (E > F) :: 꺽쇠(>)가 선택자의 기호로 사용됩니다.

아래 코드는 ul 코드의 자식들(li) 중 orange 클래스를 갖고 있는 선택자만 선택합니다.

/* css */ ul > .orange { color: red; }

• 사과
• 딸기
• 오렌지

당근

토마토

후손(하위) 선택자::

후손 요소를 선택합니다. ( E F ) :: ‘띄어쓰기’가 선택자의 기호로 사용됩니다.

div 코드 안에 있는 모든 태그들 중 orange 클래스를 갖고 있는 모든 선택자를 선택합니다.

/* css */ div .orange { color: red; }

• 사과
• 딸기
• 오렌지

당근

토마토

인접 형제 선택자::

E의 다음 형제 요소 F 하나만 선택합니다. ( E + F ) :: ‘+’ 가 선택자의 기호로 사용됩니다.

orange 클래스를 가지고 있는 태그 다음에 나타나는 li 태그를 선택합니다.

/* css */ .orange + li { color: red; }

• 딸기
• 수박
• 오렌지
• 망고
• 사과

일반 형제 선택자::

E의 다음 형제 요소 F 모두 선택합니다. ( E ~ F ) :: ‘~’ 가 선택자의 기호로 사용됩니다.

orange 클래스의 일반 형제는 딸기, 수박, 망고, 사과 등이지만 “다음”에 있는 형제들이 선택되기 때문에 망고와 사과만 선택됩니다.

/* css */ .orange ~ li { color: red; }

• 딸기
• 수박
• 오렌지
• 망고
• 사과

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

콜론(:) 기호가 한 개 붙어있는 상태입니다. (콜론이 두 개(::)가 붙어있는 건 가상 요소 선택자입니다.

아래 언급되는 hover, active, focus는 event에 가까운 선택자입니다. 선택자로 사용하기에는 독특한 형태를 가지고 있습니다.

hover::

E에 마우스(포인터)가 올라가 있는 동안에만 E를 선택합니다. (E:hover)

Google!

/* css */ a:hover { font-weight: bold; font-size: 20px; } .box { width: 100px; height: 100px; background: tomato; /* box가 변할 때 0.4초동안 애니메이션을 넣어줌 */ transition: 0.4s } .box:hover { width: 200px; background: green; }

active::

E를 마우스로 클릭하는 동안에만 E를 선택합니다. (E:active)

/* css */ .box { width: 100px; height: 100px; background: tomato; transition: 0.4s; } .box:active { width: 200px; background: yellowgreen; }

focus::

E가 포커스 된 동안에만 E를 선택합니다. (E:focus)

대화형 콘텐츠(input, img, tabindex가 부여된 요소)에서 사용이 가능합니다.

/* css */ input { width: 100px; outline: none; border: 1px solid lightgray; padding: 5px 10px; /* padding: 상하 좌우; */ transition: 0.4s; } input:focus { border: 4px solid lightblue; width: 200px; }

last-child::

E가 형제 요소 중 마지막 요소라면 선택합니다. (E:last-child)

/* css */ .fruits li:last-child { color: red; }

• item1
• item2
• item3
• item4
• item5

nth-child(n)::

E가 형제 요소 중 n번째 요소라면 선택합니다. (n 변수를 사용시 0부터 해석합니다(Zero-Base)) (E:nth-child(n))

• item1
• item2
• item3
• item4
• item5

/* css */ .fruits li:nth-child(2) { color: red; }

/* css */ .fruits li:nth-child(2n) { color: red; }

/* css */ .fruits li:nth-child(2n-1) { color: red; }

아래 예제에서 아무것도 선택되지 않는 이유는 .fruits의 첫번째 자식요소가

가 아니기 때문입니다.

/* css */ .fruits p:nth-child(1) { color: red; }

딸기

사과

망고

오렌지

아래 css에서 nth-child나 first-child의 경우 후손선택자(띄어쓰기)가 적용되었기 때문에 box-group의 모든 요소들 중 첫번째인 것들 모두를 적용시키게 됩니다.

1

2

3

3-1

3-2

3-3

/* css */ .box-group div:nth-child(1) { color: red; font-weight: bold; }

만약 box-group의 첫번째 요소만 선택하고 싶다면 자식선택자를 사용해서 요소를 선택해야 합니다.

/* css */ .box-group > div:nth-child(1) { color: red; font-weight: bold; }

만약 3-1 요소가

에서

로 바뀌었을 경우 div:nth-child(1)을 적용하면 3-1번은 빠지고 1번만 적용받게 됩니다. 만약 1과 3-1을 모두 선택하고 싶으면 :nth-child(1) 앞에 div를 제거해주고 적용시키면 됩니다. 그러면 태그와 상관없이 box-group의 모든 요소들 중 첫번째인 요소들이 모두 선택되는 것을 확인할 수 있습니다.

1

2

3

3-1

3-2

3-3

/* css */ .box-group :nth-child(1) { color: red; font-weight: bold; }

nth-of-type(n)

E의 타입(태그이름)과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택합니다. (n 변수 사용시 0부터 해석)

(E:nth-of-type(n))

p 태그들 중 첫번째를 찾습니다. 태그의 이름으로 검색하기 때문에 클래스를 선택하게 되면 적용되지 않습니다.

딸기

사과

망고

오렌지

/* css */ .fruits { font-size: 40px; font-weight: bold; } .fruits p:nth-of-type(1) { color: red; }

부정선택자

E:not(s) 라고 하면, E를 선택하는데, s라는 선택자를 제외하고 선택하겠다는 의미입니다.

즉, s가 아닌 E를 선택하겠다는 의미입니다.

• 딸기
• 사과
• 망고
• 오렌지

/* css */ .fruits { font-size: 40px; font-weight: bold; } .fruits li:not(.strawberry) { color: red; }

728×90

반응형

So you have finished reading the 선택자 topic article, if you find this article useful, please share it. Thank you very much. See more: 속성 선택자, CSS 선택자 정리, CSS 포함 선택자, CSS 선택자, Css 다중 선택자, CSS 자식 선택자, CSS 이전 형제 선택자, CSS :not 선택자