Todas las categorías de la base de conocimientos > WebSite Auditor > Selectores CSS: Búsqueda personalizada y uso
Si necesitas localizar subcadenas en el código de un documento html, Website Auditor ofrece tres métodos de búsqueda:
El funcionamiento de Contiene y No contiene es el que cabe esperar. Solo tienes que poner la cadena que quieres buscar en el cuadro y hacer clic en el botón de búsqueda para obtener los resultados.
Dominar los selectores CSS requiere más tiempo y profundizar más.
En las hojas de estilo en cascada (CSS), los selectores son patrones que se utilizan para seleccionar elementos a los que se les quiera dar un estilo. Los selectores CSS también se pueden utilizar para localizar elementos de un documento que estén escritos en lenguaje de marcado (por ejemplo, HTML).
Los selectores pueden aplicarse a:
Para poder sacar partido de los selectores CSS, hay que entender conceptos básicos sobre la estructura html del documento.
Etiqueta: comienza con el símbolo de menos que ‘<’ y a este le sigue una cadena (por ejemplo, ‘div’), un espacio opcional, un número de atributos y acaba con el símbolo de más que ‘>’. Hay etiquetas de comienzo <html> y fin </html>.
Por ejemplo, <html></html>, <div></div>, <p></p>.
Atributo: los atributos proporcionan información adicional sobre una etiqueta (o elemento). Los atributos siempre se especifican en la etiqueta inicial. Suelen ir en parejas del tipo nombre/valor como: name="value".
Por ejemplo, href=”http://homepage.com”.
Clase: es un tipo específico de atributo. Este atributo se suele utilizar para especificar un tipo en una hoja de estilo. No obstante, también se puede utilizar como un JavaScript (a través del HTML DOM) para hacer cambios en elementos HTML de una clase determinada.
Por ejemplo, class="comments".
ID: es un tipo de atributo específico. El atributo id se suele utilizar para indicar un estilo en una hoja de estilo y para modificar el elemento con ese id con JavaScript (vía HTML DOM). El atributo id especifica un id único para un elemento de HTML (el valor tiene que ser único en el documento HTML).
Los elementos se pueden describir según la posición en la que se encuentran respecto al resto de elementos. Por ejemplo, en el código que hay a continuación, <html> es un elemento raíz, es padre de <head> y <body>. <head> y <body> son hermanos. <div class="content wrapper"> es hijo directo de <body>. <div class="comments"> es el segundo hijo.
Aquí tienes una lista de los selectores CSS básicos que puedes usar en Website Auditor.
Patrón | Coincidencias | Ejemplo |
* | cualquier elemento | * |
etiqueta | elementos con el nombre de etiqueta especificado | div |
ns|E | elementos del tipo E con el espacio de nombres ns | fb|name encuentra elementos <fb:name> |
.class | elementos con el atributo ID de "id" | div.left, .result |
[attr] | elementos con un atributo "attr" (con cualquier valor) | a[href], [title] |
[∧attrPrefix] | elementos en los que el nombre del atributo comienza con "attrPrefix". Se utiliza para encontrar elementos con bases de datos HTML5 | [∧data-], div[∧data-] |
[attr=val] | elementos cuyo atributo sea "attr" y el valor sea igual a "val" | img[wdth=500], a[rel=nofollow] |
[attr="val"] | elementos cuyo atributo sea "attr" y el valor sea igual a "val" | span[hello="Cleveland"][goodbye="Columbus"], a[rel="nofollow"] |
[attr∧=valPrefix] | elementos cuyo atributo sea "attr" y el valor comience con "valPrefix" | a[href∧=http:] |
[attr$=valSuffix] | elementos cuyo atributo sea "attr" y el valor termine con "valSuffix" | img[src$=.png] |
[attr*=valContaining] | elementos cuyo atributo sea "attr" y el valor contenga "valContaining" | a[href*=/search/] |
[attr~=regex] | elementos cuyo atributo sea "attr" y cuyo valor coincida con la expresión regular | img[src~=(?i)\\.(png|jpe?g)] |
Los elementos anteriormente mencionados se pueden combinar en cualquier orden.
Por ejemplo, la consulta div.header[title] devolverá todas las páginas que incluyan etiquetas <div> con la clase 'header' y el atributo 'title'.
Patrón | Coincidencias | Ejemplo |
E F | un elemento F descendiente de un elemento E | div a, .logo h1 |
E > F | un F hijo directo de E | ol > li |
E + F | un elemento F inmediatamente precedido por un hermano E | li + li, div.head + div |
E ~ F | un elemento F inmediatamente precedido por un hermano E | h1 ~ p |
E, F, G | todos coinciden con elementos E,F o G | a [href], div, h3 |
Si desea más información sobre la sintaxis visite esta página.
Busca todas las páginas
con el script de rastreo de Google Tag Manager (introducir el contenedor id en lugar de XXX-XXXXXX) | noscript:has(iframe[src$=XXX-XXXXXX]) |
con la etiqueta h1 | h1 |
con utilización inconsistente de las etiquetas h1 y h2 (cualquier página en la que la etiqueta h1 vaya precedida del elemento hermano h2) | h2 ~ h1 |
con ciertas etiquetas canónicas (introducir la URL real en vez de http://domain.com/page.html) | link[rel=canonical][href^=http://domain.com/page.html] |
con imágenes que tengan un atributo alt determinado | img[alt=green-grass] |
con un enlace a cierta página | a[href*=page.html] |
con un enlace a las páginas https | a[href^=https] |
que contiene la palabra "SEO" en el título | title:contains(seo) |
con marcado de protocolo open graph | meta[name^=og:] |
con marcado de tarjetas de Twitter | meta[name^=twitter:] |
con iframes | iframe |
que contengan enlaces a emails | a[href^=mailto:] |
class="green-cell" | link[hreflang] |
que contengan la palabra "SEO" en las metaetiquetas de palabras clave | meta[name="keywords"][content*=seo] |