기본
- #id
- 지정되었다id(을)를 가지는 요소를 선택한다.
- element
- 지정된 태그 이름의 요소를 선택한다.
- .class
- 지정된 클래스를 가지는 요소를 선택한다.
- *
- 모든 요소를 선택한다.
- selector1, selector2, ..., selectorN
- 복수의 선택 장치를 지정해 집합 요소를 선택한다.
계층
- ancestor descendant
- ancestor(을)를 선조에게 가진다descendant(을)를 선택한다.
- parent > child
- 부모와 자식 관계를 지정해 요소를 선택한다.
- prev + next
- 전후관계를 지정해 요소를 선택한다.
- prev ~ siblings
- prev이후의 형제 관계에 있는 요소를 선택한다.
기본 필터
- :first
- 선두의 요소를 선택한다.
- :last
- 말미의 요소를 선택한다.
- :not(selector)
- 지정한 선택 장치를 제외한 요소를 선택한다.
- :even
- 짝수차례의 요소를 선택한다.
- :odd
- 홀수차례의 요소를 선택한다.
- :eq(index)
- 인덱스 지정한 요소를 선택한다.
- :gt(index)
- 지정한 인덱스보다 후의 요소를 선택한다.
- :lt(index)
- 지정한 인덱스보다 전의 요소를 선택한다.
- :header
- h1,h2등의 헤더 요소를 선택한다.
- :animated
- 애니메이션중의 요소를 선택한다.
컨텐트 필터
- :contains(text)
- 지정한 문자열을 포함한 요소를 선택한다.
- :empty
- 하늘 요소를 선택한다.
- :has(selector)
- 지정한 선택 장치 요소를 자손에게 가지는 요소를 선택한다.
- :parent
- 무엇이 밖에의 아이 요소(텍스트도 포함한다)를 가지는 요소를 선택한다.
표시/비표시 필터
속성 필터
- [attribute]
- 지정된 속성을 가지는 요소를 선택한다.
- [attribute=value]
- 속성이 지정된 값을 가지는 요소를 선택한다.
- [attribute!=value]
- 속성이 지정된 값을 가지지 않는 요소를 선택한다.
- [attribute^=value]
- 속성치가 지정된 문자열로부터 시작되는 요소를 선택한다.
- [attribute$=value]
- 속성치가 지정된 문자열로 끝나는 요소를 선택한다.
- [attribute*=value]
- 속성치가 지정된 문자열을 포함한 요소를 선택한다.
- [selector1][selector2]...[selectorN]
- 복수의 속성 필터를 지정해, 모두를 채우는 요소를 선택한다.
아이 요소 필터
- :nth-child(index/even/odd/equation)
- 각 친요소에 대해서n번째 , 짝수, 홀수,n개먼 바다등의 지정을 해 요소를 선택한다.
- :first-child
- 각 친요소에 대해서 최초의 아이 요소를 선택한다.
- :last-child
- 각 친요소에 대해서 마지막 아이 요소를 선택한다.
- :only-child
- 각 친요소가1개만 아이 요소를 가지는 경우에, 그 아이 요소를 선택한다.
폼
- :input
- 모든input, textarea, select, button요소를 선택한다.
- :text
- 모든text요소를 선택한다.
- :password
- 모든password요소를 선택한다.
- :radio
- 모든radio요소를 선택한다.
- :checkbox
- 모든checkbox요소를 선택한다.
- :submit
- 모든submit요소를 선택한다.
- :image
- 모든image요소를 선택한다.
- :reset
- 모든reset요소를 선택한다.
- :button
- 모든button요소를 선택한다.
- :file
- 모든file요소를 선택한다.
- :hidden
- 모든hidden요소와 불가시 상태에 있는 요소를 선택한다.