Discussion :

[JefReb]

Bonjour à tous, un participant de mon club m'a soumis une liste complexe avec <ul> et <ol>. Aucun problème sur le code html, mais je n'arrive pas à comprendre le soucis rencontré.
Ce participant désire avoir le premier niveau en bleu, le 2ème niveau en vert souligné, le 3ème en rouge non souligné comme le dernier en gris.
La propriété text-decoration:underline; du 2ème niveau se répercute sur les niveaux inférieures, même en forçant une propriété text-decoration:none; sur les 2 derniers niveaux.
Je ne vois pas où est l'erreur si erreur il y a. Je pense à une question de priorité, mais je ne trouve pas.

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
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
}
ul li {
	font-weight: bold;
	color: #0000FF;
}
ol li {
	font-weight: lighter;
	text-decoration: underline;
	color: #00FF00;
}
ol li ul li {
	font-weight: lighter;
	/*text-decoration: none;*/
	color: #FF0000;
}
ol li ol > li {
	color: #797979;
	/*text-decoration: none;*/
	font-style: italic;
}

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
<ul>
  <li>Les Vins de France
    <ol>
          <li>Alsace
                <ul>
                  <li>Vins blancs
                        <ol>
                          <li>Riesling</li>
                          <li>...</li>
                        </ol>
                  </li>
                  <li>...</li>
                </ul>
          </li>
          <li>...</li>
    </ol>
  </li>
  <li>...</li>
</ul>

Curieusement, et on peut tester sur: https://codepen.io/JefReb/pen/WZrBdW
Si je ne mets pas de text-decoration:none; sur les derniers niveaux, ceux-ci sont alors soulignés avec la même couleur du niveau.

Si je mets de text-decoration:none; sur les derniers niveaux, alors ceux-ci sont soulignés mais avec la même couleur verte du 2ème niveau souligné alors que le 3ème niveau est rouge et le dernier est gris.

Si quelqu'un a une idée du problème ou quelle solution pour le contourner.

[NoSmoking]

Bonjour,
ce ne sont pas tes listes qui sont en cause mais le fonctionnement intrinsèque de text-decoration qui est en cause.

Regarde ce qu'en dit MDN text-decoration.

Ces décorations se propagent sur les différents éléments fils. Cela signifie qu'il n'est pas possible de désactiver la décoration d'un élément descendant pour lequel un ancêtre est décoré.

Si tu veux différencier les différents niveaux il va te falloir passer par des éléments neutres, <span> par exemple, que tu pourras décorer.

[JefReb]

Mille merci Nosmocking, c'est hélas ce que je supposais et craignais.
Effectivement, je voulais éviter d'utiliser une autre balise telle que <span>

Merci pour le lien que j'aurais dû trouver sur text-decoration. mea culpa.
Je vais clore le topic.
A tout hasard, si cela intéresse voici la modification:

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
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 100%;
}
ul li {
	font-weight: bold;
	color: #0000FF;
}
ol li  {
	font-weight: lighter;
	color: #00FF00;
}
ol li > span  {
	text-decoration: underline;
}
ol li ul li {
	color: #FF0000;
}
ol li ol > li {
	color: #797979;
	font-style: italic;
}

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
<ul>
  <li>Les Vins de France
    <ol>
          <li><span>Alsace</span>
                <ul>
                  <li>Vins blancs
                        <ol>
                          <li>Riesling</li>
                          <li>...</li>
                        </ol>
                  </li>
                  <li>...</li>
                </ul>
          </li>
          <li>...</li>
    </ol>
  </li>
  <li>...</li>
</ul>

Encore merci et je transmets à mon participant.