1. CSS 선택자(Selector) 정리


 선택자(Selector)

 의미

지원 안함

 전체 선택자

 *

 모든 태그 선택

 -

 태그 선택자

 E

 태그명이 E인 특정 태그 선택

 -

 클래스 선택자

 .className

 class 값이 className으로 지정된 요소 선택

 -

 아이디 선택자

 #idName

 id 값이 idName으로 지정된 요소 선택

 -

 복합 선택자

 E F

 E 요소의 자손인 F 요소 선택

 -

 E > F

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

 IE 6

 E + F

 E 요소 바로 다음에 있는 형제요소 F 선택

 (E 와 F 사이에 다른요소가 존재하면 선택하지 않음.)

 IE 6

 E ~ F

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

 (E 가 F 보다 먼저 등장하지 않으면 선택하지 않음.)

 IE 6 

 속성 선택자 E[attr] 'attr' 속성이 포함된 요소 E 선택

 IE 6 

 E[attr="val"]

 'attr' 속성의 값이 'val'과 일치하는 요소 E 선택

 IE 6 

 E[attr~="val"]

 'attr' 속성의 값에 'val'이 포함되는 요소 E를 선택

 (공백으로 분리된 값이 일치해야함)

 IE 6 

 E[attr^="val"]

 'attr' 속성의 값이 'val'으로 시작하는 요소 E를 선택 

 IE 6 

 E[attr$="val"] 'attr' 속성의 값이 'val'으로 끝나는 요소 E를 선택 

 IE 6

 E[attr*="val"]

 'attr' 속성의 값에 'val'이 포함되는 요소 E를 선택

 IE 6

 E[attr|="val"]

 'attr' 속성의 값이 정확하게 'val' 이거나

 'val-' 으로 시작되는 요소 E 선택

 IE 6

 가상 클래스 선택자 E::link

 방문하지 않은 링크 E를 선택

 -

 E::visited 방문한 링크 E를 선택

 -

 E::active

 E요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 E를 선택

 -

 E::hover E요소에 마우스가 올라가 있는 동안 E를 선택

 -

 E::focus

 E요소에 포커스가 머물러 있는 동안 E를 선택

 -

 E::root

 문서의 최상위 요소(html)를 선택

 IE 6,7,8

 E::nth-child(n)

 앞으로부터 지정된 순서와 일치하는 요소가 E라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6,7,8

 E::nth-last-child(n)

 뒤로부터 지정된 순서와 일치하는 요소가 E라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6,7,8

 E::nth-of-type(n)

 E 요소 중 앞으로부터 순서가 일치하는 요소 E 선택

 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

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

 E 요소 중 끝으로부터 순서가 일치하는 E 요소를 선택

 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

 E::first-child

 첫 번째 등장하는 요소가 E 라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6

 E::last-child

 마지막에 등장하는 요소가 E 라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6,7,8

 E::first-of-type

 E 요소 중 첫번째 E를 선택

 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

 E::last-of-type

 E 요소 중 마지막 E를 선택
 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

 E::only-child E 요소가 유일한 자식이면 선택
 (E 아닌 요소가 하나라도 포함되면 선택하지 않음)

 IE 6,7,8

 E::only-of-type E 요소가 유일한 타입이면 선택
 (E 아닌 요소가 포함되어도 E 타입이 유일하면 선택)

 IE 6,7,8

 E::empty

 텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택

 IE 6,7,8

 언어 선택자

 E::lang(ko)

 HTML lang 속성의 값이 'ko'으로 지정된 요소 선택

 IE 6,7

 부정 선택자

 E::not(S)

 S가 아닌 E 요소를 선택

 IE 6,7,8

 목적 선택자 E::target

 E의 url이 요청되면 선택

 (E는 ID가 지정되어 있어야함)

 IE 6,7,8

 상태 선택자

 E::enabled

 사용 가능한 폼 컨트롤 (input, textarea, button) E를 선택

 IE 6,7,8

 E::disabled

 사용 불가능한 폼 컨트롤 (input, textarea,button) E를 선택

 IE 6,7,8

 E::checked

 선택된 폼 컨트롤 (input checked="checked") 을 선택

 IE 6,7,8

 가상 엘리먼트 선택자

 E::first-line

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

 IE 6

 E::first-letter

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

 IE 6

 E::before E 요소의 시작 시점에 생성된 요소를 선택

 IE 6,7

 E::after

 E 요소의 끝 지점에 생성된 요소를 선택

 IE 6,7



2. 선택자(Selector) 우선순위


!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]



출처 : http://www.nextree.co.kr/p8468/

'퍼블리싱 > HTML&CSS' 카테고리의 다른 글

CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09
CSS 초기화  (0) 2017.11.14

+ Recent posts