Quelle est la différence entre '>' et un espace dans les sélecteurs CSS?

127

Quel est l'intérêt d'utiliser cette syntaxe

div.card > div.name

Quelle est la différence entre ceci

div.card div.name
css css-selectors Randy Mayer
la source
Suite à cette question, comme je n'étais pas au courant de cela et que je pourrais être utilisé pour résoudre un problème que je rencontre, quels navigateurs prennent en charge ce type de sélecteur?
Kyle
3
Il est pris en charge dans tous les navigateurs actuels. IE a obtenu un support dans la version 7: msdn.microsoft.com/en-us/library/…
Matti Virkkunen

Réponses:

212

A > B sélectionnera uniquement B qui sont des enfants directs vers A (c'est-à-dire qu'il n'y a pas d'autres éléments entre eux).

A B sélectionnera n'importe quel B qui se trouve à l'intérieur de A, même s'il y a d'autres éléments entre eux.

Matti Virkkunen
la source
11

>est le sélecteur d'enfant. Il spécifie uniquement les éléments enfants immédiats et aucun descendant (y compris les petits-enfants, les petits-enfants, etc.) comme dans le deuxième exemple sans le >.

Le sélecteur enfant n'est pas pris en charge par IE 6 et les versions antérieures. Un excellent tableau de compatibilité est ici .

Pekka
la source
2

div.card > div.namecorrespond <div class='card'>....<div class='name'>xxx</div>...</div> mais ne correspond pas<div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>

div.card div.name correspond aux deux.

Autrement dit, le >sélecteur s'assure que l'élément sélectionné sur le côté droit de >est un enfant immidiate de l'élément sur son côté gauche.

La syntaxe sans les >correspondances avec tout <div class='name'>descendant (pas seulement un enfant) de <div class='card'>.

René Nyffenegger
la source
0

A> B sélectionne B s'il s'agit d'un enfant direct de A, tandis que AB sélectionne B s'il s'agit d'un enfant direct de B ou non.

<p> USING SPACE </p>

<style>
  .a .b {
    background-color: red;
  }
</style>

<span class="a">
  a
  <br>
  <span class="b"> a b</span>
  <br>

  <span class="c">
    <span class="b"> a b c</span>
  </span>
</span>

<br><br>
<p> USING GREATER THAN SIGN</p>

<style>
  .x > .y {
    background-color: red;
  }
</style>

<span class="x">
  x
  <br>
  <span class="y"> x y</span>
  <br>

  <span class="z">
    <span class="y"> x y z</span>
  </span>
</span>
Développer l'extrait

éozten
la source
Il y a un extrait de code ici. Je ne sais pas si vous pouvez le voir.
eozten le
La démo est sympa mais vraiment accessoire aux informations qui répondent à la question; des informations qui figurent déjà dans les trois autres réponses. Peut-être que si cette question était posée aujourd'hui, ce serait utile, mais si vous voulez nécroser une question datant de plus de 8 ans, ce devrait vraiment être pour une raison impérieuse.
TylerH
0

> vs espace

Considérez les deux scénarios div > span { }vs.div span { }

Ici, le <space>sélectionne tous les <span>éléments de l' <div>élément même s'ils sont à l'intérieur d'un autre élément. Le> sélectionne tous les enfants de l' <div>élément mais s'ils sont à l'intérieur d'un autre élément.

> (Supérieur à):

div > span {
  color: #FFBA00 ;
}
<body>
  <div>

    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
</body>
Développer l'extrait

Celui-ci sélectionne simplement le <span>World!</span>et il ne cherchera pas la balise <span>intérieure <p>.

Espace

div span {
  color: #FFBA00 ;
}
<body>
  <div>
    <p>
      <span>Hello,</span>
    </p>

    <span>World!</span>
  </div>
<body>
Développer l'extrait

Celui-ci sélectionne toutes les balises span, même si elles sont imbriquées dans une autre balise.

S. Goswami
la source