Primauté du dernier formatage css ?

Bonjour,

Il me semblait que la dernière programmation css primait sur les précédentes.
Or, je n'arrive pas à ce résultat.
Je vous explique, regardez cette page :

je souhaite que la première image, à gauche comme à droite, ait un margin-top de 0, et que les suivantes aient un margin-top de 22 px.

j'ai essayé deux types de css :

.contenant { width:920px; margin:40px auto; }
.left { width:120px; height:480px; float:left; }
.right { width:120px; height:480px; float:right; }

div.left img, div.right img { margin-top:22px; }
div.left img:first-of-type { margin:0; }

les résultats ne correspondent pas à mes attentes :

- à droite, un margin-top de 22 px a été appliqué à toutes les images, et c'est bien normal.

- mais à gauche, j'impose que SEULE la première image ait un margin de 0.
pourtant, toutes les images se sont vues appliquer ce margin de 0.

J'avoue ne pas comprendre, puisque ma commande "img:first-of-type" vient après une commande générale "img"

Auriez-vous une idée à me proposer, et une explication à me donner ?
merci !
Modifié par Umondel (16 Feb 2012 - 18:45)

Salut,

En fait c'est logique, le sélecteur que tu utilises indique que tu vas chercher le premier enfant dans les enfants du parent (tu me suis ? mdr), hors c'est le cas pour toutes les images qui se trouvent chacune dans un a.

En fait il faudrait plutôt faire un truc du genre :

.left a:first-child img {
...
}

Modifié par Gili (16 Feb 2012 - 19:26)

je ne suis pas vraiment d'accord avec toi, puisque j'utilise le sélecteur img:first-of-type

et il n'y a qu'une seule image qui soit la première du genre IMG dans le div.left

non ?


edit : je viens d'essayer ta proposition : pas de changement, le margin 0 s'applique toujours à toutes les images...
Modifié par Umondel (16 Feb 2012 - 20:29)

Bizzare je viens d'essayer et ça fonctionne, es-tu sûr de bien remplacer

div.left img:first-of-type

par

div.left a:first-child img

Á moins que je n'ai point compris la question ^^
Modifié par Gili (16 Feb 2012 - 20:41)

tu as raison : je n'avais pas vidé mon cache.

merci à toi !

Umondel a écrit :
et il n'y a qu'une seule image qui soit la première du genre IMG dans le div.left

La pseudo-classe :first-of-type représente un élément qui est le premier frère de son propre type dans la liste des enfants de son élément parent.

Concrètement, si tu appliques cette pseudo-classe à tes images dans div.left, le navigateur va regarder pour chaque image son parent (élément A), et vérifier que l'image est bien le premier élément de type IMG dans ce parent (c'est le cas: chaque image sera le premier et unique élément de type IMG dans son parent). Donc ton sélecteur s'applique à toutes les images.

Sinon, on peut aussi simplifier:

/* Solution actuelle */
div.left img, div.right img { margin-top:22px; }
div.left a:first-child img { margin:0; }

/* Plus simple */
.left a+a img, .right a+a img { margin-top:22px; }

bon sang, mais c'est pourtant vrai que le parent des images, c'est A et non DIV.
J'enrage de m'être autant focalisé sur le DIV.

Très élégant raccourci avec l'encodage a+a

Encore merci !