identificando la primera instancia de un tipo de elemento específico en un documento completo

pregunta:

¿Cómo se puede utilizar CSS? o JavaScript para apuntar y diseñar la ocurrencia inicial de un tipo de elemento particular en todo el documento HTML, independientemente de su ubicación dentro de la estructura del documento?

Respuesta:

Solución basada en CSS

Desafortunadamente, CSS por sí solo no proporciona funcionalidad para que coincida con la primera ocurrencia de un tipo de elemento en todo el documento. El: Pseudo-Class de primer tipo de tipo, según las especificaciones de CSS, solo se aplica al primer hermano de su tipo dentro de su elemento principal.

soluciones basadas en JavaScript

1. : emulación de primer tipo de tipo

usando JavaScript, podemos lograr esta funcionalidad introduciendo una clase personalizada, "Primero de tipo", y utilizando el método QuerySelector () para recuperar la primera coincidencia elemento del tipo deseado. Luego asignamos esta clase personalizada al elemento recuperado:

document.querySelector('p').className  = ' first-of-type';

2. Función de coincidencia personalizada

también podemos desarrollar una función JavaScript personalizada para identificar y peinar la primera ocurrencia de un tipo de elemento específico:

function nthIndexOfType(element, index) {
  var siblings = element.parentElement.children;
  var count = 1;
  for (var i = 0; i  
 Esta función acepta dos parámetros: el elemento que queremos buscar y el índice de la ocurrencia que queremos objetivo. Se itera a través de todos los elementos hermanos y devuelve el primer elemento del tipo especificado, aplicando el estilo deseado.