CSS Selector 정리

웹크롤링 과정에서 웹페이지를 분석하기 위해서는 XML를 분석하거나 CSS Selector를 사용하는 방법이 있음.

 

CSS Selector 를 사용하기 위한 방법을 정리함. 

 

1. 타겟하여 선택

    - 태그 선택 : p
    - 클래스 선택 : .class
    - ID선택 : #id

2. 위치로 선택
    - 하위(종손) 선택자 : ul li
    - 직접(자식) 선택자 : ul>li
    - 인접 현재 선택자 : h1+ul (바로 옆에 붙어 있는)
    - 일반 형제 선택자 : h1~ul (형제는 모두 선택)

3. 속성 선택
    - [attr] : 'attr' 속성이 포함된 요소 E를 선택합니다.
    - [attr="val"] : 'attr' 속성의 값이 정확하게 'val'과 일치하는 요소 E를 선택합니다.
    - [attr~="val"] : 'attr' 속성의 값에 'val'이 포함되는 요소를 선택합니다. (공백으로 분리된 값이 일치해야 합니다.)
    - [attr^="val"] : 'attr' 속성의 값이 'val'으로 시작하는 요소를 선택합니다.
    - [attr$="val"] : 'attr' 속성의 값이 'val'으로 끝나는 요소를 선택합니다.
    - [attr*="val"] : 'attr' 속성의 값에 'val'이 포함되는 요소를 선택합니다.
    - [attr|="val"] : 'attr' 속성의 값이 정확하게 'val' 이거나 'val-' 으로 시작되는 요소 E를 선택합니다.

4. form 에서 선택
    - :checked
    - :disabled
    - :enabled
    - :empty
    - :focus

 

아래 링크는 CSS Selector가 어떻게 적용되는지 즉시 확인이 가능한 사이트임.

CSS Selector를 학습할때 매우 유용함.

www.w3schools.com/cssref/trysel.asp

Try CSS Selector