| 기본 | ||
|---|---|---|
| 해당 태그의 모든 요소. | button { } | |
| 해당 클래스를 가진 요소. | .active { } | |
| 해당 id를 가진 유일한 요소. | #header { } | |
| 모든 요소. | * { box-sizing: border-box; } | |
| 문서 루트. 전역 사용자 지정 속성을 두는 관례적 위치. | :root { --gap: 1rem; } | |
| A 또는 B에 일치하는 요소 (그룹화). | h1, h2, h3 { } | |
| 결합자 | ||
| A의 자손인 모든 B. | nav a { } | |
| A의 직계 자식인 B. | ul > li { } | |
| A의 바로 뒤에 오는 B. 부모가 같음. | h1 + p { } | |
| A 뒤에 오는 모든 B. 부모가 같음. | h1 ~ p { } | |
| 의사 클래스 (상태) | ||
| 포인터가 올라가 있는 동안의 요소. | a:hover { } | |
| 키보드 포커스를 가진 요소. | input:focus { } | |
| 부모의 첫 번째 자식인 요소. | li:first-child { } | |
| n번째 자식. 2n 같은 수식도 받습니다. | tr:nth-child(2n) { } | |
| 안쪽 선택자 어느 것과도 일치하지 않는 요소. Selectors 4부터 목록도 받습니다. | li:not(:first-child, .skip) { } | |
| 선택된 체크박스, 라디오, 옵션. | input:checked { } | |
| 비활성화된 입력 또는 버튼. | button:disabled { } | |
| 안쪽 선택자에 일치하는 요소를 포함하는 부모. | li:has(ul) { } | |
| 목록의 아무 선택자. 명시도는 목록에서 가장 높은 값. | :is(ol, ul) li { } | |
| :is()와 같지만 명시도가 0. | :where(ol, ul) li { } | |
| 링을 표시해야 하는 포커스. 보통 키보드에서 옴. | a:focus-visible { } | |
| 자신 또는 자손에 포커스가 있는 요소. | form:focus-within { } | |
| 부모의 마지막 자식인 요소. | li:last-child { } | |
| 형제가 없는 요소. | p:only-child { } | |
| 같은 태그의 n번째 형제. 2n 같은 수식도 받습니다. | p:nth-of-type(2n) { } | |
| 같은 태그의 첫 번째 또는 마지막 형제. | p:first-of-type { } | |
| 자식도 텍스트도 없는 요소. | td:empty { } | |
| 아직 방문하지 않은 링크와 이미 방문한 링크. | a:visited { } | |
| 필수로 표시된 입력과 선택 사항으로 남은 입력. | input:required { } | |
| 값이 유효성 검사 규칙을 통과하거나 실패하는 입력. | input:invalid { } | |
| 사용자가 편집할 수 없는 입력. | input:read-only { } | |
| id가 URL 프래그먼트와 일치하는 요소. | #note:target { } | |
| 그룹에서 미리 선택된 옵션 또는 기본 버튼. | input:default { } | |
| 스크립트로 불확정 상태가 된 체크박스. | input:indeterminate { } | |
| 모든 내장 요소, 또는 등록된 커스텀 요소. | my-widget:defined { } | |
| 지정된 언어의 요소. | p:lang(fr) { } | |
| 의사 요소 | ||
| 요소 앞에 생성되는 콘텐츠 노드. | label::before { content: ""; } | |
| 요소 뒤에 생성되는 콘텐츠 노드. | code::after { content: ";"; } | |
| 텍스트 블록의 첫 글자. | p::first-letter { } | |
| 입력의 플레이스홀더 텍스트. | input::placeholder { } | |
| 텍스트 블록의 첫 줄. | p::first-line { } | |
| 사용자가 강조한 텍스트. | ::selection { } | |
| 목록 항목의 불릿 또는 번호. | li::marker { } | |
| 전체 화면 요소나 대화상자 뒤의 영역. | dialog::backdrop { } | |
| 파일 입력 안의 찾아보기 버튼. | input::file-selector-button { } | |
| 호스트가 노출한 섀도 DOM 파트. | my-widget::part(header) { } | |
| 속성 선택자 | ||
| 해당 속성을 가진 요소. 값은 무관. | [required] { } | |
| 속성이 val과 정확히 같음. | [type="submit"] { } | |
| 속성이 val로 시작함. | a[href^="https"] { } | |
| 속성이 val로 끝남. | a[href$=".pdf"] { } | |
| 속성이 val을 포함함. | a[href*="login"] { } | |
| val을 포함하는, 공백으로 구분된 목록. | [class~="badge"] { } | |
| 값이 val과 같거나 val과 하이픈으로 시작함. | [lang|="en"] { } | |