CSS 선택자
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>요소와 일치합니다. - 열 결합자 Experimental
-
||결합자는 같은 열에 속하는 노드를 선택합니다. 구문:A || B예제:col || td는<col>의 범위에 속하는 모든<td>요소와 일치합니다.
의사 클래스/요소
명세
| Specification |
|---|
| Selectors Level 4 |