web-dev-qa-db-fra.com

Sélecteurs CSS Child vs Descendant

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

Est-ce que le sélecteur descendant:

div p

sélectionner tout p dans un div qu'il s'agisse ou non d'un déshérent immédiat? Donc, si la p est dans un autre div, elle sera toujours sélectionnée?

Puis le sélecteur enfant:

div > p

Quelle est la différence? Est-ce qu'un enfant signifie immédiat enfant? Par exemple.

<div><p>

contre

<div><div><p>

les deux seront-ils sélectionnés ou non?

csscss-selectors
287
iceangel89

Pensez simplement à 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 c'est ma descendante.
449
RichieHindle

Oui vous avez raison. div p correspondra à l'exemple suivant, mais div > p ne le sera pas.

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

Le premier s'appelle sélecteur descendant et le second s'appelle sélecteur enfant .

45
Çağdaş Tekin

Bascailly, " ab " sélectionne tous les b situés à l'intérieur de a, tandis que " a> b "sélectionne b's quels sont les enfants seulement du a , il ne sélectionnera pas b quel est l'enfant de b quel est l'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 de fond de abc et def sera verte, mais ghi aura une couleur de fond rouge.

IMPORTANT: Si vous modifiez l'ordre des règles en:

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

Toutes les lettres auront un arrière-plan rouge, car le sélecteur de descendant sélectionne aussi l'enfant.

23
Ignas2526

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

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

En pratique: essayez ce code 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/

10
Snowcrash

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, cela fonctionne quand même)

7
rlovtang
div p 

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

div> p

Cela signifie les enfants immédiats Sélectionne tous les éléments 'p' où le parent est un élément 'div'

4
user3351229