CSS 선택자

Verba volant, scripta manent·2021년 1월 16일
0

HTML & CSS

목록 보기
5/5
post-thumbnail

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/

profile
말은 사라지지만 기록은 남는다

0개의 댓글