Pouvez-vous styliser les ancres en fonction de leur contenu en utilisant uniquement CSS ?

Règle CSS ciblant les sélecteurs basés sur le contenu

La question se pose de savoir s'il est possible d'appliquer des styles distincts aux ancres contenant un mot spécifique en utilisant du pur CSS, y compris CSS3. En raison de limitations techniques, CSS à lui seul ne dispose pas de la fonctionnalité permettant de sélectionner des éléments en fonction de leur contenu.

Explication :

Alors que le sélecteur ":contient" était autrefois proposé comme solution potentielle, elle n’a pas été intégrée dans la version de travail des sélecteurs CSS3. Par conséquent, utiliser CSS exclusivement pour cibler des éléments en fonction de leur contenu n'est pas réalisable.

Approche alternative :

En guise de solution de contournement, JavaScript peut être utilisé pour implémenter cette fonctionnalité. Une approche consisterait à parcourir toutes les ancres d'une page et à tester leur HTML interne pour la présence du mot souhaité à l'aide d'expressions régulières. Si une correspondance est trouvée, le style de l'ancre peut être modifié en conséquence.

Exemple de code :

Le code JavaScript suivant montre comment cela peut être réalisé :

Array.from(document.links).forEach(link => {
  if (/\bSpecificWord\b/i.test(link.innerHTML)) {
    link.style.color = 'red';
  }
});

Dans cet exemple, toutes les ancres de la page sont itérées, et si le HTML interne d'une ancre contient le mot "SpecificWord" (insensible à la casse), sa couleur est définie sur rouge.

Remarque :

Bien qu'il n'existe pas de solution directe dans le CSS pur, JavaScript fournit une solution de contournement flexible pour appliquer style basé sur le contenu.

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!