Discussion :

[lelectronique.com]

Bonsoir,

Voila pour une raison qui m'est totalement inconnue mon attribut :first-child n'est pas prise en compte

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
#menu ul li div #menulistcol {
	display:inline-block;
	border-right: solid 1px #000;
	padding-right:20px;
	margin-left:20px;
}
#menu ul li div #menulistcol:first-child   {
	border-right: solid 1px #F00;
	padding-right:20px;
	margin-left:0;
	background-color:#0FC;
}
#menu ul li div #menulistcol:last-child  {
	border-right: none;
	padding-right:0;
	margin-left:20px;
}
 
#menu ul li div #menulistcol li {
	padding: 0 10px;
	margin:0;
	display:block;
	float:none;
}
#menu ul li div #menulistcol li:before {
    content: "\00BB \0020"; 
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<div id="menu" class="mobilecache">
  <ul>
    <li><a href="#" title="" class="current-menu-item"><span>Accueil</span></a></li>
    <li><a href="#" title=""><span>Annuaire vélo</span></a>
      <div style="margin-left:-114px">
        <ul id="menulist">
          <li><a href="#" title="">Nouveaux Sites</a></li>
          <li><a href="#" title="">Top Hits</a></li>
          <li><a href="#" title="">Top Notes</a></li>
          <li><a href="#" title="">Top Rank</a></li>
          <li><a href="#" title="">Top Referrers</a></li>
          <li><a href="#" title="">Catégories </a></li>
        </ul>
        <div class="clear"></div>
          <ul id="menulistcol">
            <li><a href="#" title="">Actualité, Résultats</a></li>
            <li><a href="#" title="">Associations</a></li>
            <li><a href="#" title="">Clubs Vélo</a></li>
            <li><a href="#" title="">Détaillants Vélo</a></li>
            <li><a href="#" title="">Distributeurs, importateurs</a></li>
            <li><a href="#" title="">Duathlon</a></li>
            <li><a href="#" title="">Emploi Vélo</a></li>
            <li><a href="#" title="">Entretien, Technique</a></li>
          </ul>
          <ul id="menulistcol">
            <li><a href="#" title="">Actualité, Résultats</a></li>
            <li><a href="#" title="">Associations</a></li>
            <li><a href="#" title="">Clubs Vélo</a></li>
            <li><a href="#" title="">Détaillants Vélo</a></li>
            <li><a href="#" title="">Distributeurs, importateurs</a></li>
            <li><a href="#" title="">Duathlon</a></li>
            <li><a href="#" title="">Emploi Vélo</a></li>
            <li><a href="#" title="">Entretien, Technique</a></li>
          </ul>
           <ul id="menulistcol">
            <li><a href="#" title="">Actualité, Résultats</a></li>
            <li><a href="#" title="">Associations</a></li>
            <li><a href="#" title="">Clubs Vélo</a></li>
            <li><a href="#" title="">Détaillants Vélo</a></li>
            <li><a href="#" title="">Distributeurs, importateurs</a></li>
            <li><a href="#" title="">Duathlon</a></li>
            <li><a href="#" title="">Emploi Vélo</a></li>
            <li><a href="#" title="">Entretien, Technique</a></li>
          </ul>
      </div>
    </li>
    <li><a href="#" title=""><span>Magasin vélo</span></a></li>
    <li><a href="#" title=""><span>Club vélo</span></a></li>
    <li><a href="#" title=""><span>Actualité vélo</span></a></li>
    <li><a href="#" title=""><span>Evénement vélo</span></a></li>
    <li><a href="#" title=""><span>Shopping</span></a></li>
    <li><a href="#" title=""><span>Détente</span></a></li>
  </ul>
</div>

pouvez vous me dire pourquoi ? car le last-child fonctionne correctement lui

merci d'avance
bonne soirée

PS : le fond du first-child est bleu pour mieux voir le resultat dans les tests

[Invité]

Bonjour,

1/ déjà parce qu'un id DOIT être unique.
Sinon, utiliser une class.

2/ ensuite, ce n'est pas évident de trouver ce "1er" quand il y a beaucoup de choses avant...
D'ailleurs, "1er"... quoi ? réponse : enfant.

Code css :

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

1
2
3
#menu ul li div ul:nth-child(3)  {
...
}

Avec nth-child, tous les enfants sont comptés : <div class="clear"></div> est aussi compté comme enfant.
Il faut utiliser nth-of-type pour ne cibler que les éléments du même type :

Code css :

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

1
2
3
#menu ul li div ul:nth-of-type(2) {
...
}

3/ un moyen de contourner : prendre celui juste après le div class="clear" :

Code css :

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

1
2
3
#menu ul li div.clear + ul {
...
}

[lelectronique.com]

Bonjour,

Merci pour la réponse. J'avais essayé la classe rien à faire

Hier soir en testant différent truc je suis arrivé à un fonctionnement avec nth-child(3)

merci beaucoup pour ton explication car maintenant je comprend le pourquoi du comment du (3) je ne voyais pas du tout pourquoi ce chiffre

Bonne journée à toi