Ordre des sélecteurs css non respectés

[Niels]

Bonjour Messieurs,

C'est à n'y rien comprendre ! J'ai une suite de 4 images dans un div :

<div class="video-2">
<img src="donnees/image3.jpg" alt="Image3" />
<img src="donnees/image4.jpg" alt="Image4" />
<img src="donnees/image5.jpg" alt="Image5" />
<img class="last" src="donnees/image6.jpg" alt="Image6" />
</div>

Je souhaitais donc mettre une marge à droite des 3 premières :

div.video-1 img, div.video-2 img, div.video-3 img {
	margin-right: 6px;
}

.last {
	margin-right: 0px;
}

Le soucis est que Firefox et Safari (pas testé sur IE), applique d'abord le sélecteur .last et ensuite les sélecteurs img. Toutes mes images ont au final la marge à droite. Je ne vois pas pourquoi ces navigateurs applique d'abord la dernière règle du css.

Si jamais vous avez une idée.

Merci d'avance !

Niels

[dragondz]

Salut

Tu as essayé

div.video-1 img.last

a la place de

.last

?

[Niels]

Oui et sans succès non plus. Au final j'applique une classe différente aux 3 premières mais bon c'est la première fois que ça m'arrive ce truc et ça m'intrigue !

[yuston]

Résultat: -http://www.scrubs-online.net/hub/test.html

Tout marche. J'ai volontairement exagéré les marges à droites pour que visuellement le résultat soit très visible. J'ai par ailleurs appliqué la classe last à la deuxième image.

[iNCiTE Web]

Je pense qu'il doit y avoir un rapport avec le calcul du degré des sélecteurs, voir article sur Openweb, et notamment :

Si, parvenu à ce stade, deux styles de même degré de priorité restent en concurrence, le dernier apparu dans l'ordre linéaire CSS-HTML l'emporte

[Dudu]

Salut

C'est assez étrange effectivement.

Quelques questions pour tenter d'y voir plus clair:

- As-tu une URL à nous fournir pour qu'on puisse voir la page "en situation" ?

- Quel doctype utilises tu ?

- Pourquoi mettre un <div> alors qu'un <p> s'impose précisément dans ce genre de cas ?