¡Hola a todos! Estamos de vuelta para aclarar algunas preguntas frecuentes en el chat de Telegram de PimPamSEO. En esta ocasión, me centraré en explicar los conceptos básicos de los selectores CSS, acompañados de ejemplos prácticos para que podáis consultarlos y utilizarlos cuando los necesitéis.
¡Vamos allá!
Selector de etiquetas: Este tipo de selector busca elementos según su etiqueta HTML, como "p" para párrafos o "h1" para encabezados. Por ejemplo:
Este código hará que todos los párrafos tengan texto de color rojo.
Selector de clases: Este selector busca elementos que tengan una clase específica. Para usarlo, añadimos un punto (.) seguido del nombre de la clase. Por ejemplo:
Este código hará que todos los elementos con la clase "mi-clase" tengan un tamaño de fuente de 20px. En el HTML, se vería así:
Selector de ID: Este selector busca un elemento con un ID específico. Para usarlo, añadimos un símbolo de almohadilla (#) seguido del nombre del ID. Por ejemplo:
Este código cambiará el color de fondo del elemento con el ID "mi-id" a azul. En el HTML, se vería así:
Queremos aplicar diferentes estilos a cada párrafo y al título. Así que en nuestro archivo "estilos.css", escribimos lo siguiente:
Esto hará que el título sea verde, todos los párrafos tengan la fuente Arial, y el párrafo con la clase "destacado" sea naranja y en negrita.
Los selectores CSS también son muy útiles a la hora de hacer scraping de sitios web con programas como Screaming Frog. Estos programas nos permiten extraer información de una página web utilizando los selectores para encontrar los elementos que nos interesan.
Por ejemplo, imaginemos que queremos extraer los títulos de todos los artículos de un blog. Podríamos utilizar un selector CSS que busque los elementos "h2" con la clase "titulo-articulo". En Screaming Frog, iríamos a la sección "Extracción personalizada" y añadiríamos nuestro selector CSS:
De esta forma:
Con este selector, Screaming Frog buscará todos los elementos "h2" con la clase "titulo-articulo" y extraerá su contenido, lo que nos permitirá obtener los títulos de todos los artículos del blog.
Recuerda que para hacer scraping con selectores CSS, es importante conocer la estructura del sitio web y los elementos que quieres extraer. Siempre es útil examinar el código fuente de la página para entender cómo están organizados los elementos.
El código HTML sería:
Para seleccionar solo los precios con descuento dentro de la sección "productos-destacados", podríamos utilizar el siguiente selector CSS combinado:
Este selector busca todos los elementos con la clase "precio" que tengan el atributo "data-discount" con valor "true" y que, además, estén dentro de un elemento con la clase "productos-destacados". Los precios seleccionados se mostrarán en rojo y en negrita, resaltando los productos con descuento en la sección de productos destacados.
El código HTML sería:
Para aplicar los estilos deseados, podemos utilizar los siguientes selectores CSS combinados y pseudo-clases:
El primer selector, .noticias-recientes a:link, busca todos los enlaces (<a>) que no han sido visitados :link y que estén dentro de un elemento con la clase "noticias-recientes". Los enlaces seleccionados tendrán un color azul y no tendrán subrayado.
El segundo selector, .noticias-recientes a:hover, busca todos los enlaces (<a>) que estén dentro de un elemento con la clase "noticias-recientes" y que el usuario esté pasando el cursor por encima :hover. Los enlaces seleccionados cambiarán a un color verde y tendrán un subrayado.
De esta manera, logramos aplicar estilos específicos a los enlaces de las noticias recientes que no hayan sido visitados y que cambien su estilo cuando el usuario pase el cursor por encima de ellos.
Espero que hayáis entendido cómo funcionan los selectores CSS y que os haya gustado el post. No olvidéis dejar un comentario si algo no ha quedado claro y darle al "like" si os ha gustado. ¡Hasta la próxima!
¡Vamos allá!
¿Qué son los selectores CSS?
Los selectores CSS funcionan como pequeños rastreadores que buscan y encuentran elementos específicos en nuestra página web para aplicarles estilos. Por ejemplo, si deseamos modificar el color del texto de un párrafo, utilizaremos un selector para localizar dicho párrafo y posteriormente aplicarle el estilo deseado. Además, los selectores CSS pueden ser empleados en programas de extracción de contenido, permitiéndonos identificar y acceder al elemento al que queremos referirnos.Tipos de selectores CSS
Hay varios tipos de selectores que podemos usar para encontrar los elementos en nuestra página. Aquí os enseñaré tres de los más comunes:Selector de etiquetas: Este tipo de selector busca elementos según su etiqueta HTML, como "p" para párrafos o "h1" para encabezados. Por ejemplo:
CSS:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
Este código hará que todos los párrafos tengan texto de color rojo.
Selector de clases: Este selector busca elementos que tengan una clase específica. Para usarlo, añadimos un punto (.) seguido del nombre de la clase. Por ejemplo:
CSS:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
Este código hará que todos los elementos con la clase "mi-clase" tengan un tamaño de fuente de 20px. En el HTML, se vería así:
HTML:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
Selector de ID: Este selector busca un elemento con un ID específico. Para usarlo, añadimos un símbolo de almohadilla (#) seguido del nombre del ID. Por ejemplo:
CSS:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
Este código cambiará el color de fondo del elemento con el ID "mi-id" a azul. En el HTML, se vería así:
HTML:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
Ejemplo práctico
Imagina que tenemos una página web con el siguiente contenido:
HTML:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
CSS:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
Esto hará que el título sea verde, todos los párrafos tengan la fuente Arial, y el párrafo con la clase "destacado" sea naranja y en negrita.
Selectores CSS para scraping con programas como Screaming Frog
Los selectores CSS también son muy útiles a la hora de hacer scraping de sitios web con programas como Screaming Frog. Estos programas nos permiten extraer información de una página web utilizando los selectores para encontrar los elementos que nos interesan.
Por ejemplo, imaginemos que queremos extraer los títulos de todos los artículos de un blog. Podríamos utilizar un selector CSS que busque los elementos "h2" con la clase "titulo-articulo". En Screaming Frog, iríamos a la sección "Extracción personalizada" y añadiríamos nuestro selector CSS:
CSS:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
De esta forma:
Con este selector, Screaming Frog buscará todos los elementos "h2" con la clase "titulo-articulo" y extraerá su contenido, lo que nos permitirá obtener los títulos de todos los artículos del blog.
Recuerda que para hacer scraping con selectores CSS, es importante conocer la estructura del sitio web y los elementos que quieres extraer. Siempre es útil examinar el código fuente de la página para entender cómo están organizados los elementos.
Selectores CSS más avanzados
Para los que os guste el tema, y indagar un poco más, os dejo un par de casos más complejos:Selector avanzado práctico 1:
Imagina que en una tienda online queremos seleccionar todos los elementos que contengan información sobre el precio de los productos, pero solo si están dentro de un contenedor con una clase específica y si tienen un atributo "data-discount" que indique que tienen un descuento aplicado.El código HTML sería:
HTML:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
CSS:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
Este selector busca todos los elementos con la clase "precio" que tengan el atributo "data-discount" con valor "true" y que, además, estén dentro de un elemento con la clase "productos-destacados". Los precios seleccionados se mostrarán en rojo y en negrita, resaltando los productos con descuento en la sección de productos destacados.
Selector avanzado práctico 2:
Supongamos que en un sitio web de noticias queremos aplicar estilos específicos a los enlaces de los artículos relacionados que estén dentro de una sección de "noticias-recientes" y que solo afecte a los enlaces que no hayan sido visitados. Además, queremos aplicar un estilo diferente cuando el usuario pase el cursor por encima de esos enlaces.El código HTML sería:
HTML:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
CSS:
Contenido sólo para usuarios registrados. Por favor inicia sesión o regístrate.
El primer selector, .noticias-recientes a:link, busca todos los enlaces (<a>) que no han sido visitados :link y que estén dentro de un elemento con la clase "noticias-recientes". Los enlaces seleccionados tendrán un color azul y no tendrán subrayado.
El segundo selector, .noticias-recientes a:hover, busca todos los enlaces (<a>) que estén dentro de un elemento con la clase "noticias-recientes" y que el usuario esté pasando el cursor por encima :hover. Los enlaces seleccionados cambiarán a un color verde y tendrán un subrayado.
De esta manera, logramos aplicar estilos específicos a los enlaces de las noticias recientes que no hayan sido visitados y que cambien su estilo cuando el usuario pase el cursor por encima de ellos.
Espero que hayáis entendido cómo funcionan los selectores CSS y que os haya gustado el post. No olvidéis dejar un comentario si algo no ha quedado claro y darle al "like" si os ha gustado. ¡Hasta la próxima!