CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.
참고: 부모, 부모의 형제, 부모 형제의 자식을 선택할 수 있는 선택자는 존재하지 않습니다.
기본 선택자
- 전체 선택자
- 모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.
구문:*
ns|*
*|*
예제:*
은 문서 내의 모든 요소와 일치합니다. - 유형 선택자
- 주어진 노드 이름을 가진 모든 요소를 선택합니다.
구문:elementname
예제:input
은 모든<input>
요소와 일치합니다. - 클래스 선택자
- 주어진
class
특성을 가진 모든 요소를 선택합니다.
구문:.classname
예제:.index
는 "index" 클래스를 가진 모든 요소와 일치합니다. - ID 선택자
id
특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.
구문:#idname
예제:#toc
는 "toc" ID를 가진 요소와 일치합니다.- 특성 선택자
- 주어진 특성을 가진 모든 요소를 선택합니다.
구문:[attr]
[attr=value]
[attr~=value]
[attr|=value]
[attr^=value]
[attr$=value]
[attr*=value]
예제:[autoplay]
는autoplay
특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.
그룹 선택자
결합자
- 자손 결합자
구문:A B
예제:div span
은<div>
요소 안에 위치하는 모든<span>
요소와 일치합니다.- 자식 결합자
>
결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.
구문:A > B
예제:ul > li
는<ul>
요소 바로 아래에 위치하는 모든<li>
요소와 일치합니다.- 일반 형제 결합자
~
결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
구문:A ~ B
예제:p ~ span
은<p>
요소를 뒤따르는 모든<span>
요소와 일치합니다.- 인접 형제 결합자
+
결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
구문:A + B
예제:h2 + p
는<h2>
바로 뒤에 위치하는<p>
요소와 일치합니다.- 열 결합자
||
결합자는 같은 열에 속하는 노드를 선택합니다.
구문:A || B
예제:col || td
는<col>
의 범위에 속하는 모든<td>
요소와 일치합니다.
의사 클래스/요소
명세
Specification | Status | Comment |
---|---|---|
Selectors Level 4 | Working Draft | Added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection. |
Selectors Level 3 | Recommendation | Added the ~ general sibling combinator and tree-structural pseudo-classes.Made pseudo-elements use a :: double-colon prefix. Additional attribute selectors |
CSS Level 2 (Revision 1) | Recommendation | Added the > child and + adjacent sibling combinators.Added the universal and attribute selectors. |
CSS Level 1 | Recommendation | Initial definition. |