Discussion :

[loblique]

Bonjour,

Je ne comprends pas l'utilité du signe ">" dans ce code CSS.

Code :

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

1
2
3
#menu ul.level1 ul, #menu >  ul.menu-liste ul.menu-liste {
    min-width: 450px;
}

L'un de vous pourrait-il m'expliquer son utilité et son usage ?

A bientôt,

[JefReb]

Le signe > indique Parent vers enfants
ainsi cela permet de cibler très précisément ce qu'on désire.
Ainsi sur un menu tel que:

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
<nav>
  <ul id="menu">
    <li><a href="#">Item 1</a>
      <ul>
        <li><a href="#">item 1.1</a></li>
        <li><a href="#">item 1.2</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a>
      <ul>
        <li><a href="#">item 2.1</a></li>
        <li><a href="#">item 2.2</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a>
      <ul>
        <li><a href="#">item 3.1</a></li>
        <li><a href="#">item 3.2</a></li>
      </ul>
    </li>
  </ul>
</nav>

Si on applique le css suivant dans cet ordre:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
#menu {
	width: 500px;				/* largeur pour centrer */
	height: 100px;
	margin: 0 auto;				/* on centre le menu dans nav */
}
#menu li {
	display: block;
}
#menu > li {
	float: left;
}

le premier applique display:block à TOUS les li
Le deuxième cible uniquement les premier li directement parent de ul

Cela permet aussi de s'affranchir complètement de id ou classe.
Ainsi le même code:

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
<nav>
  <ul>
    <li><a href="#">Item 1</a>
      <ul>
        <li><a href="#">item 1.1</a></li>
        <li><a href="#">item 1.2</a></li>
      </ul>
    </li>
    <li><a href="#">Item 2</a>
      <ul>
        <li><a href="#">item 2.1</a></li>
        <li><a href="#">item 2.2</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a>
      <ul>
        <li><a href="#">item 3.1</a></li>
        <li><a href="#">item 3.2</a></li>
      </ul>
    </li>
  </ul>
</nav>

pourra s'écrire:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
nav > ul {
	width: 500px;				/* largeur pour centrer */
	height: 100px;
	margin: 0 auto;				/* on centre le menu dans nav */
}
nav > ul li {
	display: block;
}
nav > ul > li {
	float: left;
}

[NoSmoking]

Bonjour,

• Savoir comment utiliser les sélecteurs CSS 2.1 et les nouveautés CSS 3
• Les sélecteurs en CSS3

[loblique]

Bonjour JefReb,

Merci pour la clarté de ton explication ! C'est en effet très pratique et très efficace.

Où puis-je trouver une documentation sur le sujet et qui peut-être ferait la présentation de l'utilisation d'autres signes ?

Bonne journée,
loblique

[NoSmoking]

Où puis-je trouver une documentation sur le sujet et qui peut-être ferait la présentation de l'utilisation d'autres signes ?

Regarde les liens que j'ai mis dans ma réponse.

Tu pourras trouver également la « Selectors Level 3 - W3C Recommendation ».