> ## Documentation Index
> Fetch the complete documentation index at: https://www.octoparse.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Selectores XPath y CSS

> Los selectores CSS y XPath localizan elementos, pero fallan de maneras distintas. Cuándo usar cada uno y cómo crear selectores resistentes.

Los selectores son la base de cualquier scraper basado en reglas: indican exactamente qué elementos de una página contienen los datos que deben extraerse. Un selector bien escrito sigue funcionando tras pequeños cambios del sitio; uno frágil deja de hacerlo en cuanto un desarrollador cambia una clase o reorganiza el diseño. Aprender a crear selectores resistentes es una de las habilidades más prácticas del web scraping y merece tiempo incluso si utilizas una herramienta visual que los genera por ti.

Hay dos lenguajes principales: **selectores CSS** y **XPath**. Ambos permiten [localizar elementos](/docs/es/academy/anatomy-of-a-web-scraper) en un documento HTML, pero funcionan de forma distinta y cada uno ofrece ventajas propias.

## Selectores CSS

Los selectores CSS emplean la misma sintaxis que los desarrolladores web usan en las hojas de estilo, por lo que resultan intuitivos si tienes experiencia de frontend. Seleccionan elementos por nombre de etiqueta, clase, ID, atributos y relaciones con otros elementos. Por ejemplo, `div.product-card h2` selecciona todos los elementos `h2` dentro de divs con la clase `product-card`. Por lo general son más breves, fáciles de leer y rápidos de evaluar para el navegador. Son la mejor opción predeterminada para la mayoría de tareas de extracción sencillas.

## XPath

XPath es más potente, pero también más detallado. Trata el documento HTML como un árbol y permite recorrerlo en cualquier dirección: hacia abajo, de padre a hijo; hacia arriba, a los antecesores; lateralmente, entre hermanos; y por todo el documento. Además, XPath puede seleccionar elementos por su contenido textual —`//a[contains(text(), "Next Page")]`—, algo que CSS no permite. Por eso resulta esencial para localizar un botón por su etiqueta o una celda de tabla por el texto que contiene. También admite condiciones, funciones y predicados complejos, lo que aporta más expresividad ante estructuras poco habituales.

## Cuál elegir

La diferencia se reduce a simplicidad frente a flexibilidad. CSS resuelve de forma más clara la mayoría de casos comunes. XPath es la opción adecuada cuando la estructura HTML resulta complicada, necesitas buscar por texto o solo puedes identificar el elemento por su relación con un hermano o antecesor, no con su padre directo.

## Cómo escribir selectores resistentes

Sea cual sea el lenguaje, la durabilidad depende de algunos principios:

* **Evita nombres de clase generados automáticamente.** Frameworks como [React, Vue y Angular](/docs/es/academy/scrape-javascript-pages) suelen producir clases que cambian en cada compilación; `.css-1a2b3c` y similares son una trampa.
* **Prefiere atributos semánticos.** `id`, `data-*`, `role` y `aria-label` suelen cambiar menos porque expresan algo más que el estilo. Un selector anclado en `[data-product-id]` sobrevive a una reescritura del CSS; uno basado en `.flex-row__inner--lg`, no.
* **Usa selectores cortos.** Cuanto más larga sea la cadena de relaciones padre-hijo, más probable será que un cambio intermedio rompa toda la cadena.
* **Evita selectores posicionales.** `nth-child` y rutas XPath absolutas como `/html/body/div[3]/div[2]/ul/li[1]` presuponen que el elemento permanecerá en una posición exacta del DOM, algo que casi nunca se cumple.
* **Ancla el selector al punto estable más cercano.** En vez de partir de la raíz del documento, busca el elemento próximo con un identificador significativo y estable, y selecciona de forma relativa.

## El reto de Shadow DOM

Un obstáculo cada vez más habitual es **Shadow DOM**, una función de los componentes web que encapsula una sección del DOM dentro de un límite cerrado. Los selectores XPath y CSS estándar no pueden entrar en un shadow root, por lo que los elementos de esos componentes son invisibles para los métodos tradicionales. A medida que más sitios adoptan componentes web para crear interfaces modulares, esto se convierte en un problema práctico: el scraper puede ver la carcasa exterior, pero no el contenido renderizado dentro. La solución requiere una herramienta capaz de atravesar los shadow roots. Playwright amplía sus selectores con la sintaxis `>>`; Octoparse amplía XPath con una sintaxis personalizada que hace lo mismo y permite que un selector generado acceda a un shadow root como a cualquier subárbol del DOM.

## Cómo aborda Octoparse los selectores

Octoparse usa principalmente **XPath** para identificar elementos, una elección deliberada. Su modelo de navegación por árbol encaja de manera natural con la forma en que las personas sin conocimientos técnicos interpretan una página: «el precio dentro de esta tarjeta de producto» se traduce más directamente a XPath que a una cadena CSS. Así, los usuarios que no son desarrolladores pueden revisar o ajustar un selector cuando algo cambia.

Además, cuando el usuario hace clic en un elemento, Octoparse no genera cualquier XPath que funcione: aplica un **algoritmo inteligente de priorización de atributos**. El sistema evalúa los atributos disponibles según su estabilidad semántica; prefiere identificadores significativos como `id`, `data-*` y `role` frente a clases volátiles o índices posicionales frágiles. El XPath generado está pensado para resistir cambios menores del sitio: reorganizar el diseño o actualizar una hoja de estilo no romperá un selector anclado en `data-product-id`, a diferencia de una ruta del tipo «tercer div dentro de la segunda sección».

Este algoritmo se reconstruyó desde cero en **Octoparse 10.1.0**, situando sus selectores automáticos entre los más precisos. En la gran mayoría de páginas, el generador produce un XPath correcto y resistente al primer clic, por lo que se dedica menos tiempo a corregirlo a mano.

En páginas creadas con componentes web, el mismo generador emplea la **extensión XPath personalizada de Octoparse para Shadow DOM**. De este modo, un elemento dentro de un shadow root se puede abordar igual que uno del DOM normal, sin cambiar a otro lenguaje de selectores.

Octoparse agrega además dos funciones de IA:

* **Generación de XPath asistida por IA**, que evalúa un contexto más amplio de la página para producir selectores más robustos.
* **Autorreparación con IA** (próximamente), que detecta selectores rotos y los reconstruye a partir de la nueva estructura de la página. Abarca tanto la **paginación** —un control «Siguiente» que se ha movido o cambiado de nombre— como los selectores de **campos** —un valor desplazado en el diseño—, para que una tarea que de otro modo se detendría pueda continuar.

Estas funciones reflejan la evolución de la web moderna: las páginas son cada vez más dinámicas, se basan más en componentes y están más encapsuladas. Las herramientas de scraping deben seguirles el ritmo.

## Conclusión

Dedica tiempo a los fundamentos de los selectores aunque uses una herramienta visual. Entender qué los hace frágiles o resistentes ayuda a evaluar los resultados automáticos, solucionar errores y crear scrapers que duren semanas o meses, no solo una ejecución. Cuando los selectores ya obtienen los valores sin procesar, el siguiente paso es [limpiar y transformar el texto en los datos que realmente necesitas](/docs/es/academy/refining-data-with-regex).