Sélecteurs CSS Child vs Descendant

Je suis un peu confus entre ces 2 sélecteurs.

Le sélecteur descendant :

div p

sélectionner tout pdans un divsi c'est un descendant immédiat ou non? Donc, si le pest à l'intérieur d'un autre, divil sera toujours sélectionné?

Ensuite, le sélecteur d' enfant :

div > p

Quelle est la différence? Un enfant signifie-t-il un enfant immédiat ? Par exemple.

<div><p>

contre

<div><div><p>

seront tous deux sélectionnés ou non?

Pensez à ce que les mots «enfant» et «descendant» signifient en anglais:

• Ma fille est à la fois mon enfant et mon descendant
• Ma petite-fille n'est pas mon enfant, mais elle est ma descendante.

Oui vous avez raison. div pcorrespondra à l'exemple suivant, mais div > pne le sera pas.

<div><table><tr><td><p> <!...

Le premier est appelé sélecteur descendant et le second est appelé sélecteur enfant .

Bascailly, " ab " sélectionne tous les b à l'intérieur de a, tandis que " a> b " sélectionne les b qui ne sont que des enfants pour le a , il ne sélectionnera pas b ce qui est enfant de b ce qui est enfant de a .

Cet exemple illustre la différence:

div span{background:red}
div>span{background:green}

<div><span>abc</span><span>def<span>ghi</span></span></div>

La couleur d'arrière-plan de abc et def sera verte, mais ghi aura une couleur d'arrière-plan rouge.

IMPORTANT: si vous changez l'ordre des règles en:

div>span{background:green}
div span{background:red}

Toutes les lettres auront un fond rouge, car le sélecteur descendant sélectionne également l'enfant.

En théorie: Enfant => un descendant immédiat d'un ancêtre (par exemple Joe et son père)

Descendant => tout élément qui descend d'un ancêtre particulier (par exemple Joe et son arrière-arrière-grand-père)

En pratique: essayez ce HTML:

<div class="one">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

<div class="two">
  <span>Span 1.
    <span>Span 2.</span>
  </span>
</div>

avec ce CSS:

span { color: red; } 
div.one span { color: blue; } 
div.two > span { color: green; }

http://jsfiddle.net/X343c/1/

Sachez que le sélecteur enfant n'est pas pris en charge dans Internet Explorer 6. (Si vous utilisez le sélecteur dans un sélecteur jQuery / Prototype / YUI etc. plutôt que dans une feuille de style, il fonctionne toujours)

div p 

Sélectionne tous les éléments 'p' dont le parent est un élément 'div'

div> p

Cela signifie que les enfants immédiats sélectionnent tous les éléments «p» dont le parent est un élément «div»

La sélection CSS et l'application de style à un élément particulier peuvent être effectuées en parcourant l'élément dom [Exemple

Exemple

.a .b .c .d{
    background: #bdbdbd;
}
div>div>div>div:last-child{
    background: red;
}

<div class='a'>The first paragraph.
 <div class='b'>The second paragraph.
  <div class='c'>The third paragraph.
   <div class='d'>The fourth paragraph.</div>
   <div class='e'>The fourth paragraph.</div>
  </div>
 </div>
</div>