[CSS] 선택자

CSS 선택자 활용

일반 선택자

선택자명	선택 범위		표현식
전체 선택자	HTML 문서 내 모든 element		* {}
타입 선택자	매칭되는 element 선택		h1, h2, h3 {}
클래스 선택자	class 속성 값과 매칭되는 element 선택		.className {}
ID 선택자	id 속성 값과 매칭되는 element 선택		#idName {}

복합 선택자

선택자명	선택 범위		표현식
하위 선택자	하위 element 선택 (얼마의 깊이가 차이나든 하위에 있다면 모두 선택)		E1 E2 {}
자식 선택자	직속 하위 element 선택 (바로 내 밑의 깊이에서만 선택)		E1 > E2 {}
인접 형제 선택자	인접 형제 관계인 element 선택 (바로 내 뒤의 형제만 선택)		E1 + E2 {}
일반 형제 선택자	형제 관계인 element 선택 (내 뒤의 모든 형제를 선택)		E1 ~ E2 {}

가상 클래스 선택자

선택자 표현식	선택 범위
:link	방문하지 않은 링크를 선택 (한번 방문하지 않은 링크의 글씨 색을 지정)
:visited	방문한 링크를 선택 (한번 방문한 링크의 글씨 색을 지정)
:hover	지정된 요소에 마우스가 올라간 경우 선택 선택
:active	지정된 요소가 활성화 된 경우 선택
:focus	지정된 요소가 포커스를 가질 경우 선택
:first-child	지정된 요소 중 부모의 첫 번째 자식 선택
:last-child	지정된 요소 중 부모의 마지막 자식 선택
:nth-child(상수 혹은 n으로 된 수열)	지정된 요소 중 n번째 자식 선택
:enabled	지정된 요소가 enabled인 경우 선택
:disabled	지정된 요소가 disabled인 경우 선택
:checked	지정된 요소가 checked인 경우 선택

가상 엘리먼트 선택자 : 현재 보이지 않는 가상의 엘리먼트를 선택

선택자 표현식	선택 범위
::after	지정된 요소 뒤에 content 추가
::before	지정된 요소 앞에 content 추가
::first-letter	지정된 요소의 첫 번째 문자 선택
::first-line	지정된 요소의 첫 번째 라인 선택
::selection	사용자에 의해 선택된 요소의 위치 선택

속성 선택자

선택자 표현식	선택 범위
[A]	A 속성이 포함된 엘리먼트 선택
[A=V]	A 속성 값이 V와 정확히 일치하는 엘리먼트 선택
[A~=V]	A 속성 값이 V 단어를 포함하는 엘리먼트 선택
[A^=V]	A 속성 값이 V로 시작하는 엘리먼트 선택
[A*=V]	A 속성 값이 V를 포함하는 엘리먼트 선택
[A&=V]	A 속성 값이 V로 끝나는 엘리먼트 선택
[A|=V]	A 속성 값이 정확히 V이거나 V-로 시작하는 엘리먼트 선택