28172 sujets

CSS et mise en forme, CSS3

Bonjour,

vous connaissez tous le sélecteur "+" qui permet de sélectionner certains éléments. Par exemple, quand on veut une bordure left sur tous les éléments d'une liste (comme un menu) sauf le premier :

li + li {
   border-left: 1px solid #aaa;
}


Ma question est simple : comment faire l'inverse ?
J'ai besoin d'appliquer un margin-right:0px; au dernier élément d'une liste....

Et je ne veux pas utiliser last:child car il n'est pas très bien pris en compte contrairement aux sélecteurs comme "+" ou "~" qui eux sont prix en compte par IE > 7, FF > 1 etc...

Merci d'avance Smiley cligne
Le support de :last-child (qui n'est pas un pseudo sélecteur CSS2 mais CSS3 il me semble) est assez restreint. C'est une limitation très souvent rencontrée, on doit donc partir sur le sélecteur +. Je fais ainsi quand je tombe dans le même cas que toi :

li + li { margin-left: xxx; }
Administrateur
Hello,

:last-child est effectivement un sélecteur CSS3 et n'est reconnu qu'à partir d'IE9 (sauf astuces du genre Selectivizr).

Si tu connais le nombre d'éléments, rien ne t'empêche de cumuler les sélecteurs d'adjacence. Par exemple :
li + li + li + li + li -> cible le 5è élément de liste (et les suivants)
li:first-child + li + li + li + li -> cible le 5è élément de liste (uniquement)

Ces syntaxes (un peu barbares) fonctionnent parfaitement dès IE7.

Si tu ne connais pas le nombre d'élément, c'est bien moins facile Smiley ohwell
Bonjour à vous 2,

heureusement pour moi, le nombre d'éléments est fixe : 5
Je vais donc utiliser la solution du cumul que tu viens de m'indiquer

Sinon au pire, si le nombre de <li> est variable, ca devrait peut-être être possible en Jquery (je ne suis pas ultra calé)

Merci pour vos réponses en tout cas Smiley smile