Quelle est la différence entre 2 sélecteurs css (l'un utilisant > et l'autre non) ?

Question

Je me suis toujours demandé quelle était la différence entre ces deux sélecteurs :

#someID img

et

#someID > img

Tous deux ont un effet sur la img qui se trouvent à l'intérieur de #someID .

Quelle est la différence entre les deux ?

Answer 1

En > indique une imbrication immédiate. Les img est un enfant immédiat de #someID . Le premier sélecteur affectera tous images n'importe où à l'intérieur #someID . La seconde affectera seulement les enfants immédiats.

Answer 2

#someID img sélectionnera n'importe quel img sous un élément dont l'identifiant est #someID .

<div id="someID">
    <img href="#" /><!-- selects this element -->
    <div>
        <img href="#" /><!-- also selects this element -->
    </div>
</div>

#someID > img ne sélectionnera que les img directement sous un élément dont l'identifiant est #someID .

<div id="someID">
    <img href="#" /><!-- selects this element -->
    <div>
        <img href="#" /><!-- doesn't select this element -->
    </div>
</div>

Answer 3

> est un sélecteur d'enfant direct.

Démonstration de JSFiddle

Prenons l'exemple suivant :

CSS

#wrapper > .one { border:10px solid red; }
.one { height:100px; width:100px; padding:20px; margin:50px; border:5px solid orange;}

HTML :

<div id="wrapper">
    <div class="one">
            <div class="one"></div>
    </div>
</div>

Seule la .one div directement sous #wrapper sera entouré d'une bordure rouge.

Answer 4

La seconde ne correspond que si img est un descendant direct de #someID alors que le premier s'en moque.

Exemple illustratif :

<div id="someID">
  <img .../> <!-- both "#someID img" & "#someID > img" -->
  <div>
    <img .../> <!-- only "#someID img" -->
  </div>
</div>