뚱2's Story

Selector

Example

Example description

CSS

.class

.intro

class="intro" 속성을 가진 모든 엘리먼트 선택

1

#id

#firstname

id="firstname" 속성을 가진 엘리먼트 선택

1

*

*

모든 엘리먼트 선택

2

element

p

모든 <p> 엘리먼트 선택

1

element,element

div,p

모든 <div> 엘리먼트와 모든 <p> 엘리먼트 선택

1

element element

div p

<div> 내의 모든 <p> 엘리먼트 선택

1

element>element

div>p

<div> 바로 하위에 있는 모든 <p> 엘리먼트 선택

2

element+element

div+p

<div> 바로 다음에 있는 모든 <p> 엘리먼트 선택

2

[attribute]

[target]

target 속성을 갖고 있는 모든 엘리먼트 선택

2

[attribute=value]

[target=_blank]

target="_blank" 속성을 갖고 있는 모든 엘리먼트 선택

2

[attribute~=value]

[title~=flower]

"flower" 단어를 포함한 title 속성을 갖고 있는 모든 엘리먼트 선택

2

[attribute|=value]

[lang|=en]

lang 속성값이 "en"으로 시작하는 모든 엘리먼트 선택

2

:link

a:link

모든 방문하지 않은 링크 선택

1

:visited

a:visited

모든 방문했던 링크 선택

1

:active

a:active

활성화된 모든 링크 선택

1

:hover

a:hover

마우스 오버된 링크 선택

1

:focus

input:focus

포커스가 있는 <input> 엘리먼트 선택

2

:first-letter

p:first-letter

모든 <p> 엘리먼트의 첫 번째 문자 선택

1

:first-line

p:first-line

모든 <p> 엘리먼트의 첫 번째 줄 선택

1

:first-child

p:first-child

부모가 있는 모든 <p> 엘리먼트의 첫 번째 선택

2

:before

p:before

모든 <p> 엘리먼트 콘텐트의 앞에 선택

2

:after

p:after

모든 <p> 엘리먼트 콘텐트의 뒤 선택

2

:lang(language)

p:lang(it)

lang 속성값이 "it"로 시작하는 모든 <p> 엘리먼트 선택

2

element1~element2

p~ul

<p> 엘리먼트 앞에 있는 모든 <ul> 엘리먼트 선택

3

[attribute^=value]

a[src^="https"]

src 속성값이 "https"로 시작하는 모든 <a> 엘리먼트 선택

3

[attribute$=value]

a[src$=".pdf"]

src 속성값이 ".pdf"로 끝나는 모든 <a> 엘리먼트 선택

3

[attribute*=value]

a[src*="w3schools"]

src 속성값이 "w3schools" 문자열을 포함하는 모든 <a> 엘리먼트 선택

3

:first-of-type

p:first-of-type

부모가 있는 첫번째 <p> 엘리먼트인 모든 <p>엘리먼트 선택

3

:last-of-type

p:last-of-type

부모가 있는 마지막 <p> 엘리먼트인 모든 <p>엘리먼트 선택

3

:only-of-type

p:only-of-type

부모가 있는 유일한 <p> 엘리먼트인 모든 <p>엘리먼트 선택

3

:only-child

p:only-child

부모에게 유일한 자식인 모든 <p>엘리먼트 선택

3

:nth-child(n)

p:nth-child(2)

부모에게 두 번째 자식인 모든 <p>엘리먼트 선택

3

:nth-last-child(n)

p:nth-last-child(2)

부모에게 마지막에서 두 번째 자식인 모든 <p>엘리먼트 선택

3

:nth-of-type(n)

p:nth-of-type(2)

부모에게 두 번째 <p> 엘리먼트인 모든 <p>엘리먼트 선택

3

:nth-last-of-type(n)

p:nth-last-of-type(2)

부모에게 마지막에서 두 번째 <p> 엘리먼트인 모든 <p>엘리먼트 선택

3

:last-child

p:last-child

부모 안에서 마지막 자식인 모든 <p> 엘리먼트 선택

3

:root

:root

문서 루트 엘리먼트 선택

3

:empty

p:empty

하위에 아무것도 없는(텍스트마저도 없는) 모든 <p> 선택

3

:target

#news:target

현재 활성화된 #news 엘리먼트 선택(앵커 이름을 포함한 URL이 클릭된)

3

:enabled

input:enabled

모든 활성화된 <input> 엘리먼트 선택

3

:disabled

input:disabled

모든 비활성화된 <input> 엘리먼트 선택

3

:checked

input:checked

모든 체크된 <input> 엘리먼트 선택

3

:not(selector)

:not(p)

<p> 엘리먼트가 아닌 모든 요소 선택

3

::selection

::selection

사용자가 선택한 부분 선택

3