Identification de la première instance d'un type d'élément spécifique dans un document entier

question:

Comment utiliser css ou javascript pour cibler et style l'occurrence initiale d'un type d'élément particulier sur l'ensemble du document HTML, indépendamment de son placement dans la structure du document?

Réponse:

Solution basée sur CSS

Malheureusement, CSS seul ne fournit pas de fonctionnalité pour correspondre à la première occurrence d'un type d'élément sur l'ensemble du document. La pseudo-classe première de type, selon les spécifications CSS, s'applique uniquement au premier frère de son type dans son élément parent.

solutions basées sur JavaScript

1. : émulation d'abord de type

en utilisant javascript, nous pouvons réaliser cette fonctionnalité en introduisant une classe personnalisée, "tout le premier-de-type" et en utilisant la méthode QuerySelector () pour récupérer le premier correspondant " élément du type souhaité. Nous attribuons ensuite cette classe personnalisée à l'élément récupéré:

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

2. Fonction de correspondance personnalisée

Nous pouvons également développer une fonction JavaScript personnalisée pour identifier et styliser la première occurrence d'un type d'élément spécifique:

function nthIndexOfType(element, index) {
  var siblings = element.parentElement.children;
  var count = 1;
  for (var i = 0; i