Sélecteur CSS '>' ; qu'est-ce que c'est ?

Question

J'ai vu le "plus grand que" ( > ) utilisé dans le code CSS à plusieurs reprises, mais je n'arrive pas à comprendre ce qu'il fait. Quelle est sa fonction ?

Answer 1

> sélectionne les enfants immédiats

Par exemple, si vous avez des divs imbriqués comme ceci :

<div class='outer'>
    <div class="middle">
        <div class="inner">...</div>
    </div>
    <div class="middle">
        <div class="inner">...</div>
    </div>
</div>

et vous déclarez une règle css dans votre feuille de style comme ceci :

.outer > div {
    ...
}

vos règles ne s'appliqueront qu'aux divs dont la classe est "middle", puisque ces divs sont des descendants directs (enfants immédiats) d'éléments dont la classe est "outer" (à moins, bien sûr, que vous ne déclariez d'autres règles plus spécifiques remplaçant ces règles). Voir fiddle.

div {
  border: 1px solid black;
  padding: 10px;
}
.outer > div {
  border: 1px solid orange;
}

<div class='outer'>
  div.outer - This is the parent.
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
  <div class="middle">
    div.middle - This is an immediate child of "outer". This will receive the orange border.
    <div class="inner">div.inner - This is an immediate child of "middle". This will not receive the orange border.</div>
  </div>
</div>

<p>Without Words</p>

<div class='outer'>
  <div class="middle">
    <div class="inner">...</div>
  </div>
  <div class="middle">
    <div class="inner">...</div>
  </div>
</div>

Note complémentaire

Si, à la place, vous aviez un espace entre les sélecteurs au lieu de > Dans le cas contraire, vos règles s'appliqueraient aux deux divs imbriqués. L'espace est beaucoup plus couramment utilisé et définit un "sélecteur descendant", ce qui signifie qu'il recherche tout élément correspondant en bas de l'arbre plutôt que de se limiter aux enfants immédiats, comme le fait la balise > fait.

NOTE : Le > n'est pas pris en charge par IE6. En revanche, il fonctionne dans tous les autres navigateurs actuels, y compris IE7 et IE8.

Si vous vous intéressez aux sélecteurs CSS moins utilisés, vous pouvez également consulter le site suivant + , ~ y [attr] des sélecteurs, qui peuvent tous être très utiles.

Cette page contient une liste complète de tous les sélecteurs disponibles, ainsi que des détails sur leur prise en charge par les différents navigateurs (c'est principalement IE qui pose problème), et de bons exemples de leur utilisation.

Answer 2

> sélectionne tous les descendants/enfants directs

Un espace sélectionnera tous les descendants profonds, tandis qu'un sélecteur supérieur à > ne sélectionnera que les descendants immédiats. Voir l'exemple de fiddle.

div { border: 1px solid black; margin-bottom: 10px; }
.a b { color: red; } /* every John is red */
.b > b { color: blue; } /* Only John 3 and John 4 are blue */

<div class="a">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

<div class="b">
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
  <b>John 4</b>
</div>

Answer 3

Il s'agit du sélecteur enfant CSS. Exemple :

div > p sélectionne tous les paragraphes qui sont des enfants directs de div.

Ver este

Answer 4

Comme d'autres l'ont dit, il s'agit d'un enfant direct, mais il convient de noter que c'est différent de laisser simplement un espace... un espace est destiné à tout descendant.

<div>
  <span>Some text</span>
</div>

div>span correspondrait à cela, mais il no correspond à ça :

<div>
  <p><span>Some text</span></p>
</div>

Pour correspondre à cela, vous pourriez faire div>p>span o div span .

Answer 5

Il déclare la référence parentale, regardez cette page pour la définition :

http://www.w3.org/TR/CSS2/selector.html#child-selectors