Todas las categorías de la base de conocimientos > WebSite Auditor > Selectores CSS: Búsqueda personalizada y uso

Selectores CSS: Búsqueda personalizada y uso

Introducción

Si necesitas localizar subcadenas en el código de un documento html, Website Auditor ofrece tres métodos de búsqueda:

Contiene: ofrece una lista de todas las páginas de la web que contienen la subcadena (sin distinguir entre mayúsculas y minúsculas)
No contiene: ofrece una lista de todas las páginas que no contienen la subcadena (sin distinguir entre mayúsculas y minúsculas)
Selectores CSS: ofrece una lista de todas las páginas de la web en las que aparece código que coincide con el selector.

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.

Selectores CSS

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:

todos los elementos de un determinado tipo, por ejemplo, los encabezados de segundo nivel h2
Elementos determinados por un atributo, sobre todo:

id: un identificador único del documento
class: un identificador para anotar múltiples elementos en un documento

elementos que dependen de cómo están colocados con respecto a otros en la estructura del documento.

Para poder sacar partido de los selectores CSS, hay que entender conceptos básicos sobre la estructura html del documento.

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.

Sintaxis básica de los selectores CSS

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'.

Los selectores también se pueden combinar.

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.

Algunos ejemplos para necesidades SEO

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]

Publicado por: Alexander, Atención al cliente de Link-Assistant.Com
Creado el: 14 de octubre de 2016, a las 12:03.