web-dev-qa-db-fra.com

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

Duplicate possible:
Que signifie ">" dans les règles CSS?

J'ai vu le "supérieur à" (>) utilisé dans le code CSS à quelques reprises, mais je ne peux pas comprendre ce qu'il fait. Qu'est ce que ça fait?

csscss-selectors
543
Bojangles

> sélectionne les enfants immédiats

Par exemple, si vous avez des div imbriqués comme celui-ci:

<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 div ayant une classe "moyenne" car ces div sont des descendants directs (enfants immédiats) d'éléments avec une classe "outer" (à moins que, bien sûr, vous ne déclariez d'autres règles plus spécifiques remplaçant ces règles) . Voir le violon.

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 latérale

Si vous disposiez plutôt d'un espace entre les sélecteurs au lieu de >, vos règles s'appliqueraient aux deux divs imbriqués. L'espace est beaucoup plus couramment utilisé et définit un "sélecteur de descendants", ce qui signifie qu'il recherche tout élément correspondant dans l'arborescence plutôt que les enfants immédiats comme le fait le >.

REMARQUE: le sélecteur > n'est pas pris en charge par IE6. Cependant, cela fonctionne dans tous les autres navigateurs actuels, y compris IE7 et IE8.

Si vous recherchez des sélecteurs CSS moins utilisés, vous pouvez également consulter les sélecteurs +, ~ et [attr], 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 dans divers navigateurs (principalement IE présentant des problèmes), ainsi que de bons exemples d'utilisation.

724
Spudley

> sélectionne tous descendants directs/enfants

Un sélecteur d'espace sélectionnera tous les descendants profonds alors qu'un sélecteur supérieur à > ne sélectionnera que tous les descendants immédiats. Voir le violon par exemple.

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>
203
Adam Kiss

C'est le sélecteur d'enfants CSS. Exemple:

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

Voir this

10
dheerosaur

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

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

div>span correspondrait à cela, mais pas correspondrait à ceci:

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

Pour correspondre à cela, vous pouvez faire div>p>span ou div span.

8
Nathan MacInnes

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

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

3
David Mårtensson

C'est un sélecteur d'enfants.

Cela correspond lorsqu'un élément est l'enfant d'un élément. Il est composé de deux sélecteurs ou plus séparés par ">".

Exemples):

La règle suivante définit le style de tous les éléments P enfants de BODY:

body > P { line-height: 1.3 }

Exemples):

L'exemple suivant combine des sélecteurs descendants et des sélecteurs enfants:

div ol>li p

Cela correspond à un élément P qui est un descendant d'un LI; l'élément LI doit être l'enfant d'un élément OL; L'élément OL doit être un descendant d'un DIV. Notez que l’espace blanc facultatif autour du combinateur ">" a été laissé de côté.

3
Margarez