Selectores CSS

Web scraping en Python

Thomas Laetsch

Data Scientist, NYU

Piedra de Rosetta: CSS

Sustituye / por > (salvo el primer carácter)
- XPath: /html/body/div
- Selector CSS: html > body > div
Sustituye // por un espacio (salvo el primer carácter)
- XPath: //div/span//p
- Selector CSS: div > span p
Sustituye [N] por :nth-of-type(N)
- XPath: //div/p[2]
- Selector CSS: div > p:nth-of-type(2)

Piedra de Rosetta: CSS

XPATH

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

CSS

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

Atributos en CSS

Para buscar por clase, usa un punto .
- Ejemplo: p.class-1 selecciona todos los párrafos con la clase class-1

Para buscar por id, usa la almohadilla #
- Ejemplo: div#uid selecciona el div con id igual a uid

Atributos en CSS

Selecciona párrafos dentro de la clase class1:

css_locator = 'div#uid > p.class1'

Selecciona todos los elementos cuya clase sea class1:

css_locator = '.class1'

Estado de la clase

css = '.class1'

Selección por clase - solo clase (CSS).png

Estado de la clase

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

Selección por clase - XPath (igual).png

Estado de la clase

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

Selección por clase - XPath (contiene).png

Selectores con CSS

from scrapy import Selector 

html = '''
<html>
  <body>
    <div class="hello datacamp">
      <p>¡Hola, mundo!</p>
    </div>
    <p>¡Disfruta DataCamp!</p>
  </body>
</html>
''' 
sel = Selector( text = html )

>>> sel.css("div > p")
out: [<Selector xpath='...' data='<p>¡Hola, mundo!</p>'>] 

>>> sel.css("div > p").extract()
out: [ '<p>¡Hola, mundo!</p>' ]

¡Nos vemos en C(SS)!

Web scraping en Python