[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 요소 |