CSS 선택자 모음 본문
패턴 |
해석 |
IE9~ |
IE8 |
IE7 |
* |
모든 요소 선택 |
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 |
---|