Web Scrapping con R

Capítulo 4: Selectores CSS

1. Introducción al código CSS

El lenguaje CSS (Cascading Style Sheets) corresponde a un lenguaje de marcado que nos ayuda a estilizar una página web acorde a cierta especificación. Además, es la segunda herramienta (después del conocimiento de HTML), necesaria para scrapear una página web.

Básicamente, el lenguaje CSS especifica reglas acerca de cómo un HTML se renderiza en un navegador, incluyendo cosas como el tamaño de la fuente, el color, el tipo de letra, etc. A continuación un ejemplo.

En este se puede observar que un selector construye su estilo entre { } colocando propiedades y valores.

2. Selectores CSS

Si bien no estamos particularmente interesados en cómo definir el estilo de una página web, sí nos interesa cómo estas definiciones se localizan dentro de un documento HTML. Así, los selectores CSS se encuentran definiendo el estilo de un determinado elemento dentro del código HTML, y estos son los que normalmente se utilizan para scrapear una página web con rvest. Veamos un ejemplo.

En este, el elemento paragraph se encuentra definido en la parte de abajo, y podemos usar la función html_nodes para localizar dicho elemento. De hecho, el lenguaje CSS le permite al desarrollador web definir estilos para cada elemento, al nivel más granular posible, para construir sitios web complejos y atractivos.

Cabe notar que existen operadores en estos selectores como *, que nos permiten seleccionar todas las etiquetas existentes o , que nos permite tomar varios selectores al mismo tiempo.

3. Clases CSS

Hasta el punto anterior podríamos scrapear páginas web muy sencillas sin necesidad de utilizar herramientas como inspeccionar. Sin embargo, los sitios web actualesson mucho más complejos y tienen cientos de elementos HTML. Por ello se crearon las classes y IDs, los cuales nos permiten identificar ciertas partes de un documento HTML.

Con las classes o clases, los elementos HTML pueden ser categorizados en grupos de estilo, donde cada elemento con la misma clase tiene aplicado el mismo estilo defindo en el CSS. Para especificar una clase en el CSS, se lo hace con un punto antes del nombre de la clase, por ejemplo: .prose-text. Al seleccionarlos dentro con html_nodes usaremos la misma lógica.

Veamos un ejemplo:

library(rvest)
library(tidyverse)
html <- read_html("https://www.eluniverso.com/noticias/ecuador/estado-de-excepcion-en-guayaquil-y-en-el-oro-se-ampliaria-por-30-dias-coe-hara-recomendacion-a-presidente-guillermo-lasso-nota/")
html %>% html_nodes(".prose-text")

{xml_nodeset (17)}
 [1] <p class="prose-text">El Comité de Operaciones de Emergencia <b>(COE) </b>n ...
 [2] <p class="prose-text">Así lo manifestó<b> Juan Zapata,</b> titular del COE, ...
 [3] <p class="prose-text"><b>Zapata</b> agregó que se pide mantener todas las m ...
 [4] <p class="prose-text">El argumento es el aumento de casos de la variante de ...
 [5] <p class="prose-text">El <b>estado de excepción</b> rige hasta este<b> miér ...
 [6] <p class="prose-text">Se inició el pasado 14 de julio con un <b>decreto </b ...
 [7] <p class="prose-text"><b>Para Guayaquil </b>se limitó el aforo al 50 % en e ...
 [8] <p class="prose-text">En la provincia de <b>El Oro</b>, los aforos son del  ...
 [9] <p class="prose-text">El transporte interprovincial quedó suspendido<b> des ...
[10] <p class="prose-text">El aforo en el transporte público es del 30 % y los a ...
[11] <p class="prose-text">El funcionario sostuvo que es facultad del presidente ...
[12] <p class="prose-text"><b>Según Garzón</b>, en El Oro, en 15 días “apenas te ...
[13] <p class="prose-text">Espera que con el aumento de la <b>población vacunada ...
[14] <p class="prose-text">La funcionaria aspira que, a <b>principios o mediados ...
[15] <p class="prose-text"><b>Este jueves, el COE </b>recibirá el informe de eva ...
[16] <p class="prose-text">Además, el COE generará <b>medidas complementarias</b ...
[17] <p class="prose-text">Las medidas complementarias podrían referirse a los t ...

Si por otro lado, deseamos seleccionar varias clases al mismo tiempo, tan solo las ponemos una junto a la otra, sin utilizar espacios, como se muestra a continuación.

library(rvest)
library(tidyverse)
html <- read_html("https://www.eluniverso.com/noticias/ecuador/estado-de-excepcion-en-guayaquil-y-en-el-oro-se-ampliaria-por-30-dias-coe-hara-recomendacion-a-presidente-guillermo-lasso-nota/")
html %>% html_nodes("div.resized-image.col-span-12.w-full.my-2.bg-grey-100") %>% 
  html_attrs()

[[1]]
                                              class 
"resized-image col-span-12 w-full my-2 bg-grey-100" 

4. IDs

Los IDs por otro lado, son un tipo especial de clases y hacen identificables a cada nodo. Su diferencia yace en que deben ser únicos dentro de una página web. Estos se escriben dentro del CSS con un # al inicio, como se muestra a continuación.

Veamos un ejemplo práctico.

html %>% html_nodes("#R3T0A9DXCBF9GX")

{xml_nodeset (1)}
[1] <div id="R3T0A9DXCBF9GX" data-hook="review" class="a-section review aok-rela ...

A la final, en lugar de seleccionar todo con una cierta clase o ID, scrapearemos un sitio web combinando ambos para llegar a elemento en específico que estamos buscando.

De igual manera, podemos especificar aún más esta búsqueda utilizando pseudo-classes. Existen muchos tipos, pero las más importantes son las conocidos como first-child, last-child y nth-child. Como su nombre nos indica, nos ayudan a rastrear el hijo específico de un elemento HTML.

En la práctica estos se ven como:

html %>% html_nodes("div:nth-child(2) p:nth-child(15)")

{xml_nodeset (1)}
[1] <p>On Internet Explorer: <br>\nTop menu; FILE\\ OPEN\\ BROWSE <br> \nClick o ...

5. Combinadores CSS

Para utilizar selectores CSS de manera combinada usaremos los combinadores, que en total son 4. Estos siempre tienen la misma estructura: selector CSS, operador de combinación y otro selector. Estos operadores son:

• Espacio ( ), el cual también es llamado el combinador de descendencia. Este selecciona a todos los descendientes de un elemento HTML.
• Mayor que (>), el cual forma al combinador hijo. Este es un tipo específico del combinador de descendiente y selecciona a solo a los descendientes directos o hijos.
• Más (+), el cual también es llamado combinador de hermano adyacente. Este selecciona al hermano directo de un nodo, exceptuando a este nodo.
• Tilde (~), el cual es llamado combinador general de hermanos. Este funciona similar al anterior, pero selecciona a todos los hermanos.

Estos operadores son bastante útiles sobretodo cuando algún elemento HTML que estemos buscando no es directamente detectable a través de una clase o ID. Para identificarlos, nos serán de especial ayuda las herramientas de inspección.