Locator CSS

Web Scraping dengan Python

Thomas Laetsch

Data Scientist, NYU

Batu Rosetta CSS

  • Ganti / dengan > (kecuali karakter pertama)
    • XPath: /html/body/div
    • Locator CSS: html > body > div
  • Ganti // dengan spasi (kecuali karakter pertama)
    • XPath: //div/span//p
    • Locator CSS: div > span p
  • Ganti [N] dengan :nth-of-type(N)
    • XPath: //div/p[2]
    • Locator CSS: div > p:nth-of-type(2)
Web Scraping dengan Python

Batu Rosetta CSS

XPATH

xpath = '/html/body//div/p[2]'

CSS

css = 'html > body div > p:nth-of-type(2)'
Web Scraping dengan Python

Atribut di CSS

  • Untuk mencari elemen berdasarkan class, gunakan titik .
    • Contoh: p.class-1 memilih semua paragraf dalam class-1
  • Untuk mencari elemen berdasarkan id, gunakan pagar #
    • Contoh: div#uid memilih elemen div dengan id sama dengan uid
Web Scraping dengan Python

Atribut di CSS

Pilih paragraf dalam class class1:

css_locator = 'div#uid > p.class1'

Pilih semua elemen dengan atribut class class1:

css_locator = '.class1'
Web Scraping dengan Python

Status Kelas

css = '.class1'

Pemilihan Kelas - hanya class CSS.png

Web Scraping dengan Python

Status Kelas

xpath = '//*[@class="class1"]'

Pemilihan Kelas - XPath sama dengan.png

Web Scraping dengan Python

Status Kelas

xpath = '//*[contains(@class,"class1")]'

Pemilihan Kelas - XPath contains.png

Web Scraping dengan Python

Selector dengan CSS

from scrapy import Selector 

html = '''
<html>
  <body>
    <div class="hello datacamp">
      <p>Hello World!</p>
    </div>
    <p>Enjoy DataCamp!</p>
  </body>
</html>
''' 
sel = Selector( text = html )
>>> sel.css("div > p")
out: [<Selector xpath='...' data='<p>Hello World!</p>'>] 

>>> sel.css("div > p").extract()
out: [ '<p>Hello World!</p>' ]
Web Scraping dengan Python

Sampai (C)SS Lagi!

Web Scraping dengan Python

Preparing Video For Download...