본문 바로가기

CSS 선택자 모음 본문

STUDY/SCSS N CSS

CSS 선택자 모음

Publee 2019. 2. 25. 19:10

 

 패턴 

 해석 

 IE9

 IE8 

 IE

 *

모든 요소 선택 

O

O

O

#id

ID값으로 지정된 요소를 선택

O

O

O

.class

Class값으로 지정된 요소를 선택

O

O

O

E

Element 요소 선택

O

O

O

 E:link

방문하지 않은 Element를 선택 

O

O

O

 E:visited

방문한 Element를 선택

O

O

O

 E:hover

마우스가 Element에 올라가 있는 상태의

Element를 선택

O

O

O

 E:active

마우스 클릭 또는 키보드가 눌린 상태의

Element를 선택

O

O

O

E:focus

Focus가 머물러 있는 동안 Element를 선택

O

O

X

E:first-line

Element 요소의 첫번째 라인을 선택 

O

O

O

E:first-letter

Element 요소의 첫번째 문자를 선택

O

O

O

 E[foo]

'foo' 속성이 포함된 Element를 선택

O

O

O

 E[foo="bar"]

'foo'속성의 값이 'bar'와 일치하는 Element를 선택 

O

O

O

 E[foo~="bar"] 

'foo'속성의 값이 'bar'를 포함하는 Element를 선택

O

O

O

 E[foo |= "en"]

'foo' 속성의 값이 'en'  또는 'en~'으로 시작되는

Element 선택

O

O

O

E:lang(en)

HTML lang 속성의 값이 'en'로 지정된

Element 선택

O

O

X

E:before

Element 요소 전에 생선된 요소를 선택

O

O

X

E:after

Element 요소 후에 생성된 요소 선택

O

O

X

E>F

 Element 요소의 자식인 F 요소 선택

O

O

O

E+F

Element 요소 뒤의 F 요소 선택

O

O

O

E[foo^="bar"]

'foo' 속성의 값이 'bar'로 정확하게 시작하는 요소 선택

O

O

O

E[foo$="bar"]

'foo' 속성의 값이 'bar'로 정확하게 끝나는 요소 선택 

O

O

O

 E[foo*="bar"]

'foo'속성의 값에 'bar'를 포함하는 요소 선택

O

O

O

E:root

문서의 최상위 루트 요소 선택

O

X

X

E:first-child

첫번째 자식 요소가 Element라면 선택 

O

O

O

 E:last-child

Element 요소 중 마지막 자식의 Element를 선택

O

O

X

E:nth-child(n)

Element의 N번째 요소

O

O

X

E:nth-last-child(n)

뒤로부터 지정된 순서와 일치하는 요소가

Element라면 선택

O

O

X

 E:nth-of-type(n)

Element 요소 중 앞으로 부터 순서가

일치하는 n번째 Element선택

O

O

X

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

Element 요소 중 끝으로부터 순서가

일치하는 n번째 Element 선택

O

O

X

E:first-of-type

 Element 요소 중 첫번째 Element 선택

O

O

X

E:last-of-type 

Element 요소 중 마지막 Element 선택

O

O

X

E:only-child

Element가 유일한 자식이면 선택

O

O

X

E:only-of-type 

Element가 같은 타입이면 선택

O

O

X

E:empty

텍스트 및 공백을 포함하여

빈 자식을 가진 Element를 선택

O

O

X

E:target

Element의 URL의 대상이면 선택

O

O

X

E:enabled

 활성화된 폼 컨트롤 Element요소 선택

O

O

X

E:disabled

비활성화된 폼 컨트롤 Element요소를 선택

O

O

X

E:checked

선택된 폼 컨트롤(라디오,체크박스)를 선택

O

O

X

E:not(s)

S가 아닌 E 요소를 선택

O

O

X

E~F 

E요소가 앞에 존재하면 F를 선택

O

O

O

a[href*="sample"]

별표는 입력값이 속성값 안 어딘가에 존재한다면 적용ex)sample.com(O), sample.co.kr(O), sample.net(O), sam.com(X)

O

O

O

a[href*=".jpg"]

이미지(.jpg 로 끝나는 url)로 링크가 걸린 앵커를 선택gif와 png는 영향받지 않습니다.

O

O

O

'STUDY > SCSS N CSS' 카테고리의 다른 글

가상요소(:before, :after)에 줄바꿈하기  (0) 2019.02.26
Comments