Comment puis-je utiliser des sélecteurs CSS pour cibler des éléments dont les ID contiennent un texte spécifique et se terminent par une chaîne spécifique ?

Sélecteur CSS pour les identifiants contenant du texte partiel

Dans la quête pour cibler des éléments spécifiques en fonction de leurs identifiants, vous pourriez rencontrer un scénario comme celui-ci celui présenté dans la question. Les identifiants en question suivent un modèle précis, et le but est de sélectionner des éléments dont les identifiants contiennent un texte spécifique, suivi de deux points, et se terminant par "nom".

Pour y parvenir, le sélecteur CSS fourni dans la réponse remplit brillamment son objectif :

<code class="css">a[id*='Some:Same'][id$='name']</code>

Décomposer ce sélecteur :

• a[id*='Some:Same'] : ceci sélectionne tous les éléments dont les ID contiennent le texte « Some : Same ». Le caractère générique astérisque (*) permet à n'importe quel caractère d'apparaître avant "Some:Same."
• [id$='name'] : ceci sélectionne tous les éléments dont les ID se terminent par le texte "name". Le caractère générique du signe dollar ($) garantit que "nom" apparaît à la toute fin de l'ID.

En combinant les deux critères à l'aide de la notation entre crochets, nous sélectionnons uniquement ceux éléments dont les identifiants contiennent « Some:Same » et se terminent par « name ». Cela cible efficacement les éléments spécifiques avec des identifiants tels que « someGenerated Some:Same:0:name » ou « someGenerated Some:Same:1:name ».