CSS3 선택자에 대해서 간단히 정리합니다.
정리만 하는거라 무슨내용인지 이해를 못하실 수 있습니다.
jQuery 선택자 사용법과 거의 동일하다고 생각하시면 됩니다.
jQuery가 CSS3를 따라한것 같은데... 아닌가요?^^
- * : 전체선택자
- tag : 태그선택자
- #id : 아이디 선택자
- .class : 클래스 선택자
- tag1 tag2 : 후손(뒤쪽모두) 선택자
- tag1 > tag2 : 자손(바로뒤만) 선택자
- tag[type=value] : 속성 선택자
tag[type~=value] : 단어 포함 (and)
tag[type|=value] : 단어 포함 (or)
tag[type^=value] : 시작
tag[type$=value] : 끝
tag[type*=value] : 값 포함 - tag1 + tag2 : 동위(바로뒤만) 선택자
tag1 ~ tag2 : 동위(뒤쪽모두) 선택자 - tag:first-child : 구조 선택자 (첫 번째 위치하는 자손)
tag:last-child : (마지막에 위치하는 자손)
tag:nth-child(2n+1) : 앞에서 수열번째 자손
tag:nth-last-child(2n+1) : 뒤에서 수열번째 자손
tag:first-of-type : 첫번째 태그
tag:last-ot-type : 마지막 태그
tag:nth-of-type(2n+1) : 앞에서 수열번째 태그
tag:nth-last-ot-type(2n+1) : 뒤에서 수열번째 태그 - tag:active : 반응 선택자 (마우스로 클릭한)
tag:hover : 마우스를 올린 - tag:checked : 상태 선택자 (체크 상태)
tag:focus : 초점이 맞추어진 상태
tag:enabled : 사용 가능한 상태
tag:disabled : 사용 불가능한 상태 - tag:link : 링크 선택자 (href가 있는 a태그)
tag:visited : 방문했던 링크의 a태그 - tag::first-letter : 문자 선택자 (첫 번째 글자만)
tag::first-line : 첫 번째 줄만
tag::after : 태그뒤에 위치하는 공간
tag::before : 태그앞에 위치하는 공간
tag::selection : 드래그한 글자 - tag:not(tag) : 부정 선택자
※ 흔히 하는 실수들...
- #id tag1, tag2 와 #id tag1, #id tag2 다르게 작동합니다.
앞쪽은 #id tag1과 tag2를 선택하는 것임.
뒷쪽은 #id tag1과 #id tag2를 선택하는 것임. - 웹 표준에 따르면 각각의 태그에 지정된 속성 이외의 것을 사용하면 안 됨.
단, 속성 앞에 문자열 data-를 붙이면 사용자 지정 속성으로 인정해 줌.
예) jQuery Mobile : data-role 을 사용함.
※ 예제 풀기
- input[type=checkbox]:checked + label {background:red}
체크박스가 체크되면 label의 배경색을 빨간색으로... - li:nth-child(2n) {background:red}
li태그의 짝수열은 배경을 빨간색으로... - input:not([type=password]) {background:red}
password가 아닌것은 모두 배경이 빨간색으로...
