Pseudo Classes nth-child

Bonjour,

J'ai un petit soucis avec ma liste. Pour faire simple voici mon code :

HTML

Code:

---

1 2 3 4 5 6 7 8 9 10

<ul id="liste"> <li>list item 1</li> <li>list item 2 <ul> <li>list item 2.1</li> <li>list item 2.2</li> <li>list item 2.3</li> </ul> </li> <li>list item 3</li>

---

en faite, le soucis c'est quand j'applique un style à la liste "list item 1" il s'applique automatiquement à la liste "list item 2.1" chose que je ne veux pas avoir :calim2:.

CSS

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

#top-nav li:nth-child(1) { background:#8601af; } #liste li:nth-child(2) { background:#d0ea2b; } #liste li:nth-child(2) { background:#d0ea2b; } #liste li:nth-child(3) { background:#848484; }

---

Alors ma question est la suivante :
Comment je peux appliquer un style défini pour "list item 2.1" different de "list item 1" ???????
:ccool:

Si tu ne veux pas que item 2.1 hérite de nth-child(1) :

Code:

---

1 2 3

#liste > li:nth-child(1){ background:#8601af; }

---

Si tu veux appliquer un style spécifique pour item 2.1 :

Code:

---

1 2 3

#liste ul li:nth-child(1){ /* Autres styles */ }

---

Citation:

---

Envoyé par Bovino

Si tu ne veux pas que item 2.1 hérite de nth-child(1) :

Code:

---

1 2 3

#liste > li:nth-child(1){ background:#8601af; }

---

Si tu veux appliquer un style spécifique pour item 2.1 :

Code:

---

1 2 3

#liste ul li:nth-child(1){ /* Autres styles */ }

---

---

Merci