CSS 선택자

CSS 선택자란?

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 요소를 사용자 컴퓨터의 언어 설정에 따라 다르게 표현할 때 사용한다.

참고 : http://tcpschool.com/