Comment styliser la première instance d'un type d'élément en HTML à l'aide de CSS ou de JavaScript ?

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

Question :

Comment peut-on utiliser CSS ou JavaScript pour cibler et styliser l'occurrence initiale d'un type d'élément particulier dans l'ensemble du document HTML, quel que soit son emplacement dans le document structure ?

Réponse :

Solution basée sur CSS

Malheureusement, CSS à lui seul ne fournit pas de fonctionnalités correspondant au premier occurrence d’un type d’élément dans l’ensemble du document. La pseudo-classe :first-of-type, conformément aux spécifications CSS, s'applique uniquement au premier frère de son type au sein de son élément parent.

Solutions basées sur JavaScript

1. :émulation de premier type

En utilisant JavaScript, nous pouvons obtenir cette fonctionnalité en introduisant une classe personnalisée, "premier de type", et en utilisant la méthode querySelector() pour récupérer la première correspondance é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 < siblings.length; i++) {
    if (siblings[i].tagName === element.tagName) {
      if (count === index) {
        return siblings[i];
      }
      count++;
    }
  }
  return null;
}

nthIndexOfType(document.querySelector('p'), 1).style.backgroundColor = 'pink';

Cette fonction accepte deux paramètres : l'élément nous voulons rechercher et l'index de l'occurrence que nous voulons cibler. Il parcourt tous les éléments frères et renvoie le premier élément du type spécifié, en appliquant le style souhaité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!