comment limiter l'application d'un style CSS à certains éléments

Publié le 11 Octobre 2011

J'ai récemment rencontré un problème avec mes styles css.

J'utilise une table HTML à 2 colonnes pour afficher diverses information sous forme de clé/valeur.

Les clés sont du texte donc pas de problème mais les valeurs peuvent être du texte ou des éléments plus complexes.

Mon problème et que j'applique une bordure sur les images lorsqu'elles correspondent à une valeur du tableau.

Pour ceci j'utilise le style CSS suivant:

.monTableau img { border: 1px solid #000; }

Jusque là pas de problème.

 

Mais j'ai eu besoin d'ajouter un élément complexe qui n'était pas juste une image mais une autre table comprenant des images.

Et forcément mon style CSS s'est retrouvé appliqué aussi sur ces images en plus du style défini dans mon élément - ce que je ne voulais pas.

En fait on peut spécifier dans le CSS sur quel élément doit s'appliquer le style. Il m'a donc suffit de transformer mon style de la manière suivante:

.monTable > tbody > tr > td > img { border: 1px solid #000; }

pour qu'il ne s'applique que sur les images directement placées à l'intérieur d'une cellule <td> et non sur des images situées plus profondément dans la structure HTML du document.

Bien joué CSS!

Rédigé par Bliz

Publié dans #CSS

Repost 0
Pour être informé des derniers articles, inscrivez vous :
Commenter cet article