Héritage CSS et signe ">" dans les selectors

Version imprimable

29/07/2017, 22h22
loblique

Héritage CSS et signe ">" dans les selectors
Bonjour,

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

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,

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:

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:

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:

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:

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;
}

30/07/2017, 11h34
NoSmoking
Bonjour,
- Savoir comment utiliser les sélecteurs CSS 2.1 et les nouveautés CSS 3
- Les sélecteurs en CSS3
31/07/2017, 08h10
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
31/07/2017, 16h23
NoSmoking

Citation:

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 ».