Discussion :

[anonyme13]

Bonjour,

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

HTML

Code :

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

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 .

CSS

Code :

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

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" ???????

[Bovino]

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

Code :

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

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

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

Code :

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

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

[anonyme13]

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

Code :

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

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

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

Code :

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

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

Merci