CSS 규칙을 적용할 요소를 정의한다.
종류 | 정의 |
---|---|
전체 선택자 | HTML 문서 내부의 모든 요소를 선택한다. |
HTML 요소 선택자 | HTML 요소의 이름을 직접 사용하여 선택할 수 있다. |
아이디(id) 선택자 | 특정 아이디 이름을 가지는 요소만을 선택할 때 사용한다. |
클래스(class) 선택자 | 같은 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다. |
그룹 선택자 | 여러 선택자를 같이 사용하고자 할 때 사용하며, 여러 선택자를 쉼표(,)로 구분하여 연결한다. |
종류 | 정의 |
---|---|
자손 선택자 | 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택하며, 해당 요소와 하위 요소 사이에 한 칸의 띄어쓰기를 반드시 명시해야 한다. |
자식 선택자 | 해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택한다. |
종류 | 정의 |
---|---|
동위 선택자 | HTML 요소의 계층 구조에서 같은 부모 요소(형제 요소)를 가지고 있는 요소 중에서 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다. |
일반 동위 선택자 | 형제 요소와 동위 관계에 있으며, 해당 요소보다 뒤에 존재하는 특정 타입의 요소를 모두 선택한다. |
인접 동위 선택자 | 형제 요소와 동위 관계에 있으며, 해당 요소의 바로 뒤에 존재하는 특정 타입의 요소를 모두 선택한다. |
종류 | 정의 |
---|---|
:link | 사용자가 아직 한 번도 이 링크를 통해서 연결된 페이지를 방문하지 않은 상태를 선택한다. 기본값이다. |
:visited | 사용자가 한 번이라도 이 링크를 통해서 연결된 페이지를 방문한 상태를 선택한다. |
:hover | 사용자의 마우스 커서가 링크 위에 올라가 있는 상태를 선택한다. |
:active | 사용자가 마우스로 링크를 클릭하고 있는 상태를 선택한다. |
:focus | 포커스를 가지고 있는 input 요소를 모두 선택한다. |
종류 | 정의 |
---|---|
:checked | 체크된 상태의 input 요소를 모두 선택한다. |
:enabled | 사용할 수 있는 input 요소를 모두 선택한다. |
:disabled | 사용할 수 없는 input 요소를 모두 선택한다. |
종류 | 정의 |
---|---|
:first-child | 모든 자식 요소 중에서 맨 앞에 위치하는 자식 요소를 모두 선택한다. |
:last-child | 모든 자식 요소 중에서 맨 마지막에 위치하는 자식 요소를 모두 선택한다. |
:nth-child | 모든 자식 요소 중에서 앞에서 n번째에 위치하는 자식 요소를 모두 선택한다. |
:nth-last-child | 모든 자식 요소 중에서 뒤에서 n번째에 위치하는 자식 요소를 모두 선택한다. |
:first-of-type | 모든 자식 요소 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택한다. |
:last-of-type | 모든 자식 요소 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택한다. |
:nth-of-type | 모든 자식 요소 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택한다. |
:nth-last-of-type | 모든 자식 요소 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택한다. |
:only-child | 자식 요소를 단 하나만 가지는 요소의 자식 요소를 모두 선택한다. |
:only-of-type | 자식 요소로 특정 타입의 요소 단 하나만을 가지는 요소의 자식 요소를 모두 선택한다. |
:empty | 자식 요소를 전혀 가지고 있지 않은 요소를 모두 선택한다. |
:root | 문서의 root 요소를 선택한다. |
종류 | 정의 |
---|---|
::first-letter | 텍스트의 첫 글자만을 선택한다. |
::first-line | 텍스트의 첫 라인만을 선택한다. |
::before | 특정 요소의 내용 부분 바로 앞에 다른 요소를 삽입할 때 사용한다. |
::after | 특정 요소의 내용 부분 바로 뒤에 다른 요소를 삽입할 때 사용한다. |
::selection | 해당 요소에서 사용자가 선택한 부분만 선택한다. |
종류 | 정의 |
---|---|
[속성이름~="속성값"]선택자 | 특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택한다. |
[속성이름|="속성값"]선택자 | 특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택한다. |
[속성이름^="속성값"]선택자 | 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택한다. |
[속성이름$="속성값"]선택자 | 특정 속성의 속성값이 특정 문자열로 끝나는 요소를 모두 선택한다. |
[속성이름*="속성값"]선택자 | 특정 속성의 속성값에 특정 문자열을 포함하는 요소를 모두 선택한다. |
종류 | 정의 |
---|---|
:not | 모든 선택자와 함께 사용할 수 있으며, 해당 선택자를 반대로 적용하여 선택한다. |
:lang | 특정 HTML 요소를 사용자 컴퓨터의 언어 설정에 따라 다르게 표현할 때 사용한다. |