티스토리 뷰

CSS 선택자

  • 선택자 기본 서식

서식 설명
* 모든 요소를 선택
<요소 이름> 요소 이름을 기반으로 선택
.<클래스 이름> 클래스 이름을 기반으로 선택
#<id 이름> id 속성을 기반으로 선택
  • 선택자들의 관계를 지정하는 서식

서식 설명
<선택자>, <선택자> 쉼표로 구분된 여러 개의 선택자를 모두 선택
<선택자> <선택자> 앞 선택자의 후손 중 뒤 선택자에 해당하는 것을 모두 선택
<선택자> > <선택자> 앞 선택자의 자손 중 뒤 선택자에 해당하는 것을 모두 선택
<선택자> + <선택자> 같은 계층에서 바로 뒤에 있는 요소를 선택
<선택자1> ~ <선택자2> 선택자1 부터 선택자2 까지의 요소 모두 선택
  • 선택자 속성을 기반으로 지정하는 서식

서식 설명
<요소>[<속성>] 해당 속성을 가진 요소를 선택
<요소>[<속성>=<값] 해당 속성의 값이 지정한 값과 같은 요소를 선택
<요소>[<속성>~=<값] 해당 속성을 값이 지정한 값을 단어로 포함(띄어쓰기로 구분해서 완전히 포함)하고 있다면 선택
<요소>[<속성>\|=<값] 해당 속성의 값으로 시작하면 선택(하이픈 기호구분)
<요소>[<속성>^=<값] 해당 속성의 값이 지정한 값으로 시작하면 선택
<요소>[<속성>$=<값] 해당 속성의 값이 지정한 값으로 끝나면 선택
<요소>[<속성>*=<값] 해당 속성의 값이 지정한 값을 포함하고 있다면 선택
  • 위치 또는 상태를 지정하는 서식

서식 설명
<요소>:root 루트 요소
<요소>:nth-child(n) n번째 자식 요소
<요소>:nth-last-child(n) 뒤에서부터 n번째 자식요소
<요소>:nth-of-type(n) n번째 해당 종류의 요소
<요소>:first-child 첫 번째 자식 요소
<요소>:last-child 마지막 자식 요소
<요소>:first-of-type 첫 번째 해당 종류의 요소
<요소>:last-of-type 마지막 해당 종류의 요소
<요소>:only-child 자식으로 유일한 요소
<요소>:only-of-type 자식으로 유일한 종류의 요소
<요소>:empty 내용이 없는 요소
<요소>:lang(code) 특정 언어로 code를 지정한 요소
<요소>:not(s) s 이외의 요소
<요소>:enabled 활성화된 UI 요소
<요소>:disabled 비활성화된 UI 요소
<요소>:checked 체크돼 있는 UI 요소를 선택

css 선택자로 추출

  • html에서 Numbers 요소를 추출

< books.html >

<ul id='bible'>
    <li id='ge'>Genesis</li>
    <li id='ex'>Exodus</li>
    <li id='le'>Leviticus</li>
    <li id='nu'>Numbers</li>
    <li id='de'>Deuteronomy</li>
</ul>

< sel-books.py >

from bs4 import BeautifulSoup

fp = open('books.html', encoding='utf-8')
soup = BeautifulSoup(fp, 'html.parser')

# css 선택자로 검색하는 방법
sel = lambda q : print(soup.select_one(q).string)
sel('#nu')  # id가 nu
sel('li#nu') # li태그 중 id가 nu
sel('ul > li#nu')   # ul태그의 자식 중 li태그 중 id가 nu
sel('#bible #nu')   # id가 bible 아래에 id가 nu
sel('#bible > #nu') # id가 bible 의 자식 중 id가 nu
sel('ul#bible > li#nu') # ul태그 중 id가 bible 의 자식 중 li태그의 id가 nu
sel('li[id="nu"]')  # li태그 중 id가 nu
sel('li:nth-of-type(4)')    # li태그 중 4번째

# 그 밖의 방법
print(soup.select('li')[3].string)  # 모든 li태그 중 4번째
print(soup.find_all('li')[3].string)    # 모든 li태그 중 4번째

  • 아보카도 선택

< fruits-vegetable.html >

<html>
<body>
<div id="main-goods" role="page">
  <h1>과일과 야채</h1>
  <ul id="fr-list">
    <li class="red green" data-lo="ko">사과</li>
    <li class="purple" data-lo="us">포도</li>
    <li class="yellow" data-lo="us">레몬</li>
    <li class="yellow" data-lo="ko">오렌지</li>
  </ul>
  <ul id="ve-list">
    <li class="white green" data-lo="ko">무</li>
    <li class="red green" data-lo="us">파프리카</li>
    <li class="black" data-lo="ko">가지</li>
    <li class="black" data-lo="us">아보카도</li>
    <li class="white" data-lo="cn">연근</li>
  </ul>
</div>
</body>
</html>

< sel-avocado.py >

from bs4 import BeautifulSoup 

fp = open("fruits-vegetables.html", encoding="utf-8")
soup = BeautifulSoup(fp, "html.parser")

# CSS 선택자로 추출하기
# id가 ve-list 의 자식 중 모든 li태그 중 4번째
print(soup.select_one("#ve-list > li:nth-of-type(4)").string)  
# id가 ve-list 의 자식 중 li태그 중 data-lo 속성이 us
print(soup.select("#ve-list > li[data-lo='us']")[1].string) 
# id가 ve-list 의 자식 중 li태그의 클래스가 black인 요소중 2번째
print(soup.select("#ve-list > li.black")[1].string) 

# find 메서드로 추출
# li태그 중 data-lo속성이 us, class 가 black인 조건을 만족하는 것
cond = {"data-lo":"us", "class":"black"}
print(soup.find("li", cond).string)

# find 메서드를 연속적으로 사용
# id가 ve-list 중 li태그 중 data-lo속성이 us, class 가 black인 조건을 만족하는 것
print(soup.find(id="ve-list")
           .find("li", cond).string)

정규 표현식과 조합

from bs4 import BeautifulSoup 
import re # 정규 표현식을 사용할 때 
html = """
<ul>
  <li><a href="hoge.html">hoge</li>
  <li><a href="https://example.com/fuga">fuga*</li>
  <li><a href="https://example.com/foo">foo*</li>
  <li><a href="http://example.com/aaa">aaa</li>
</ul>
"""
soup = BeautifulSoup(html, "html.parser")
# 정규 표현식으로 href에서 https인 것 추출하기 
li = soup.find_all(href=re.compile(r"^https://"))
for e in li: print(e.attrs['href'])

 

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함