Discussion :

[Mr N.]

Soit le bout de code suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<ul>
   <li>Pomme</li>
   <li>Banane</li>
   <li>Poire</li>
</ul>

J'aimerais appliquer des regles de styles sur tout les li *sauf* le dernier (ou alors appliquer sur tous et annuler sur le dernier)

Comment qu'il faut faire ?
J'arrive à appliquer des traitements sur tous sauf le premier grâce à li + li, mais pour le dernier je trouve pas

Une idée ? une solution ?
Merci d'avance

[SpaceFrog]

avec javascript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementsByTagName('ul')[0].lastChild.className="classdudernier"

au passage ne soit pas si sexiste ... dernier fils ...
dernier enfant cela pourrait tout aussi bien être une fille ...

[Mr N.]

Non pas de javascript. Pur css/html

Bien vu pour le genre, en plus dans mon exemple le dernier enfant est une poire.

Qui a dit "toi même" ?

[SpaceFrog]

ben à part donner un id au dernier ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<ul>
   <li>Pomme</li>
   <li>Banane</li>
   <li id="last">Poire</li>
</ul>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
#last { ...

[Mr N.]

oui mais non. Je peux pas toucher au code html de base
Quand je dis "Pur css/html", il faut comprendre Pur css... tout court.

Mais merci quand même pour tes propositions

[tyx]

Plop,

Tu y étais presque mais il faut ruser avec le sélecteur +

Tu définis d'abord ta règle css pour tous tes li

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
li { color: red ; }

Puis tu annules pour le dernier avec un double +

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
li+li+li { color: black ; }

Il faudra biensûr autant de li qu'il y a d'élement dans ton menu. L'exemple ci-dessus étant basé sur le tien.

[Mr N.]

Arggh. J'y ai bien pensé, mais ma liste est dynamique alors que ma css non.

[tyx]

Tu pourrais exposer clairement à quel résultat tu souhaites parvenir? C'est à dire l'effet souhaité sur ton dernier élément.

Il est souvent possible de faire une chose de différente façon parce que là ca devient beaucoup plus complexe avec une liste dynamique.

[SpaceFrog]

ta liste est dynamique en quel language ?
ne peux tu pas jouer là dessus genre construire tes +li

[Mr N.]

Ma liste est dynamique en php.
Je ne veux pas générer mes li+li+.. dynamiquement.

Je cherchais une solution toute prête en css qui m'aurait échappée...

Mon besoin est que je veux mettre en valeur le dernier élément d'une liste, sachant que une liste peut comporter d'autres listes.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
* Pierre
* Paul
   - Sophie
   - Jeanne
* Marc
   - Gertrude
* Robert
   - Patrick
   - Stephane
   - Luc
* Daniel

=> je veux mettre en valeur Jeanne, Gertrude, Luc et Daniel car ils sont chacuns les dernier de leur liste...

[ilood]

Bonjour

Les navigateurs modernes gèrent

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
li { border: 1px solid #00; }
li:last-child {
  border: none
}

[Mr N.]

merci ! !
#€!$@ d'IE

[tyx]

Bien vu ilood,

Il est vrai qu'il faudrait commencer à se plonger dans les propriétés CSS3 qui sont déjà en place sur certains navigateurs.