En css, on peut facilement définir les caractéristiques de « l’enfant » d’un élément donné. Mais il arrive que l’on veuille définir les caractéristiques du « parent » d’un enfant donné. Et là, c’est impossible actuellement en CSS3. Mais il y a une solution !
Le problème
J’ai expliqué (dans un autre article) comment créer une différence visible entre un lien qui s’ouvre à la place de la page en cours, et un lien qui s’ouvrira dans une autre fenêtre.
C’était très bien pour les liens correspondant à du texte, mais ça créait aussi le petit symbole pour des images.
En CSS3, il est facile de donner un style spécifique à un élément dont le parent est X. Mais on ne peut pas (actuellement, en octobre 2015) définir un style pour un élément dont l’enfant est Y.
Or il fallait que je puisses définir le style de tout lien (<a>) dans lequel était imbriqué une image. Il fallait donc faire la différence entre deux <a>, identiques du point de vue du CSS :
<a href="http://www.manifeste-leaders.org/le-manifeste/">manifeste « de quels leaders avons-nous besoin ? »</a>
et
<a title="running with the seagulls by Ed Schipul, on Flickr" href="https://www.flickr.com/photos/eschipul/386762837" target="_blank"> <img class="alignright" title="running with the seagulls by Ed Schipul, on Flickr" src="https://farm1.staticflickr.com/139/386762837_7baafc5878_n.jpg" alt="running with the seagulls" width="320" height="213" /> </a>
La seule solution, c’est d’ajouter une classe ou un identifiant aux <a> qui contiennent des <img>. Et jQuery est là pour nous aider !
La solution (jQuery)
Voir l’exemple sur CodePen ici.
Attention, la syntaxe dans WordPress est un peu différente de celle utilisée dans l’exemple CodePen. Dans WordPress, on insérera les éléments suivants dans functions.php du thème enfant :
add_action( 'wp_head', 'ald_add_class_to_element_with_nested_img' );
function ald_add_class_to_element_with_nested_img() {
?>
<script>
jQuery(document).ready(function() {
jQuery("a:has(img)").addClass("img-inside");
jQuery("figure:has(a.img-inside)").addClass("external");
});
</script>
<?php
}
Et voilà, tout fonctionne parfaitement.
