Comment sélectionner le parent d'un élément HTML en CSS ?
Le langage CSS permet de regrouper et de sélectionner des éléments HTML selon des critères.
Le langage CSS est un langage proposant des sélecteurs. Ils permettent de regrouper et de sélectionner des éléments selon des critères (identifiant, classe, éléments enfants...).
Actuellement, les spécifications CSS sont réparties en deux normes : CSS 2.1 et CSS 3. Les listes des sélecteurs pris en charge sont disponibles sur le site du W3C. Il n'existe pas de sélecteur pour les éléments parents.
La norme CSS4 est en cours d'élaboration. Le document de travail inclut la pseudo classe :has(). Cette écriture provient de JQuery et permet de sélectionner l'élément dont la condition située entre parenthèses répond aux critères. Il serait possible de réaliser la sélection suivante :
li:has(> .maClasse)
Actuellement, aucun navigateur ne supporte encore cette écriture. Il faut attendre les avancées du travail sur la norme CSS4 ou faire appel au langage JavaScript.
La bibliothèque JavaScript JQuery UI fournit la méthode parent(). Il est possible avec cette méthode de sélectionner l'élément parent du ou des éléments cibles.
//Sélectionne les <li> qui ont pour enfant un élément ayant la classe maClasse
$(.maClasse).parents('li').css(propriété, valeur);
Il existe également des scripts externes qui ajoutent cette fonctionnalité directement dans les feuilles de styles CSS.