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를 선택 | 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 ]
'퍼블리싱 > 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 |