[CSS] CSS 선택자 지정 방법

출처 : 자바스크립트와 Node.js를 이용한 웹 크롤링 테크닉

■ CSS 선택자 지정 방법

▼ 선택자 기본 서식

서식	설명
*	· 모든 요소
태그명	· 태그명이 일치하는 요소(예)
.클래스명	· 클래스 속성 값이 일치하는 요소
#id명	· id 속성의 값이 일치하는 요소

▼ 선택자끼리의 관계를 지정하는 서식

서식	설명
선택자, 선택자	· 열거된 복수의 선택자 (예) h1, h2
선택자 선택자	· 하위 계층의 후손 요소 (예) div > h1
선택자 > 선택자	· 바로 아래 계층의 자식 요소 (예) div > h1
선택자A + 선택자B	· 같은 계층에 선택자A 바로 뒤에 있는 선택자B 한 개 (예) h1 + h2
선택자A ~ 선택자B	· 같은 계층에 선택자A 바로 뒤에 있는 선택자B 모두 (예) p ~ ul

▼ 선택자의 속성에 따른 지정 서식

서식	설명
요소[att]	· 특정 속성을 가지는 요소를 선택
요소[att = 'val']	· att 속성의 값이 val인 요소, val값이 전체 일치해야 함
요소[att ~ 'val']	· att 속성의 값에 val을 단어로(스페이스로 구분) 포함하는 요소
요소[att |= 'val']	· att 속성의 값이 val이거나 val로 시작하고 뒤에 하이픈(-)이 있는 모든 요소
요소[att ^= 'val']	· att 속성의 값이 val로 시작하는 요소
요소[att $= 'val']	· att 속성의 값이 val로 끝나는 요소
요소[att *= 'val']	· att 속성의 값에 val을 포함하는 요소

▼ 위치나 상태를 지정하는 서식

서식	설명
:root	· Document의 루트 요소
:nth-child(n)	· 동위 요소 중 n 번째 위치한 요소
:nth-last-child(n)	· 동위 요소 중 뒤에서 n 번째 위치한 요소
태그:nth-of-type(n)	· 동위 요소 중 지정한 태그 중 n번째 요소
:first-child	· 동위 요소 중 첫번째 요소
:lat-child	· 동위 요소 중 마지막 요소
태그:first-of-type	· 동위 요소 중 지정한 태그 중 첫번째 요소
태그:last-of-type	· 동위 요소 중 지정한 태그 중 마지막 요소
:only-child	· 동위 요소 없이 한 개의 요소만 있을 때 해당 요소
:only-child	· 동위 요소 중 지정한 태그 중 마지막 요소
태그:only-of-type	· 동위 요소 중 지정한 태그가 하나만 있을 때 해당 요소
:empty	· 내용이 빈 요소
:lang(code)	· 특정 언어 code로 된 요소
:not(s)	· s 이외의 요소
:enabled	· 활성화된 UI 요소
:disbled	· 비활성화된 UI 요소
:checked	· 체크된 UI 요소