Herramientas para capturar y convertir la web

Uso de selectores CSS en GrabzIt

Los selectores CSS se utilizan en el elemento de destino, ocultan el elemento y esperan a que las características del elemento identifiquen uno o más elementos HTML. Los dos tipos principales de selectores CSS son seleccionar por identificación o clase. Un elemento HTML tiene una identificación si contiene el atributo id como se muestra a continuación.

<span id="myidentifier">Example Text</span>

Para seleccionarlo creas un selector CSS como #myidentifier

Si un elemento HTML tiene una clase, tendrá el atributo de clase como se muestra en este ejemplo.

<div>
<span class="myclass">Example Text One</span>
<span class="myclass">Example Text Two</span>
<span class="myclass">Example Text Three</span>
</div>

Para seleccionarlo creas un selector CSS como .myclass

Si desea seleccionar un elemento particular con la clase de myclass puede utilizar selectores CSS estándar para hacerlo, en este caso el enésimo niño(2) selector así: .myclass:nth-child(2) para seleccionar el segundo intervalo de myclass. Sin embargo, esto sólo funcionará en este caso porque no hay otros elementos bajo el elemento div principal. Si hubiera un elemento ap, por ejemplo, alteraría el índice del enésimo hijo.

Seleccione un elemento HTML sin una identificación o clase única

A veces, un elemento HTML que necesita seleccionar no tiene una identificación o clase que sea única dentro de una página. Al seleccionar estos elementos HTML, se requiere un selector CSS más complicado.

<div class="Header">
   <a href="https://www.example.com/">
     <div>...</div>
   </a>
   <div class="SearchBar">...</div>
   <div class="TagLine">...</div>
</div>

Por ejemplo, en el ejemplo anterior queremos seleccionar el elemento DIV dentro del enlace. Para hacer esto, necesitamos especificar un selector CSS que funcione desde el DIV único con el Header clase.

div.Header a div

Los selectores de CSS son una característica estándar del desarrollo web. Este artículo ofrece una buena visión general de cómo usar selectores CSS.

Manejo de múltiples elementos coincidentes

Si se devuelven varios elementos HTML desde un selector CSS y está utilizando el elemento de destino o esperando las características del elemento, solo se utilizará el primer elemento coincidente. Sin embargo, si utiliza la función Ocultar elemento, todos los elementos HTML coincidentes se ocultarán.

Si desea ocultar varios elementos con diferentes identificadores o clases, puede hacerlo separando cada selector CSS con una coma. Entonces, por ejemplo, para ocultar la clase de ejemplo y la identificación anteriores, usaría lo siguiente #myidentifier,.myclass

Obtener un selector de CSS desde el navegador

Puedes obtener el selector de CSS desde el navegador Chrome en dos sencillos pasos.

Haz clic derecho en la parte de la página web en la que te encuentres. intEstás interesado y haz clic. Inspeccionar. Esto abrirá la ventana del inspector.

Haga clic derecho en el elemento en la ventana del inspector, haga clic Copiar y haga clic en Selector de copias.