: problème du dernier enfant lors de l'ajout d'un pied de page après une section

Question

A droite, donc c'est étrange. Ce code fonctionne comme prévu:

HTML:

<section> 
    Section #1 
</section> 

<section> 
    Section #2 
</section> 

<section> 
    Section #3 
</section> 

CSS:

section{ 
    margin-right: 30px; 
} 
section:last-child{ 
    margin-right: 0; 
} 

Les deux premières sections obtiennent une marge de droite de 30px, tandis que la troisième ne soit pas une marge de droite .

Maintenant, si j'ajoute un élément de bas de page après la dernière section, le: dernier-enfant sera ignoré. De cette façon, les trois sections auront une marge droite de 30px. Cela est vrai dans Mozilla et Webkit.

Quelqu'un a-t-il une idée pourquoi cela est et comment il peut être réparé?

Answer 1

:last-child signifie dernier enfant, il n'a aucune incidence sur le reste du sélecteur, c'est une restriction indépendante. Cela signifie qu'il doit être le dernier enfant, indépendamment du type d'élément ou de la classe, etc ... il est littéralement le dernier élément enfant. Puisque votre pied de page est après cela, il n'y a pas d'élément correspondant qui soit les deux un <section>et un :last-child.

Le sélecteur pour ceci est :last-of-type, mais il n'est pas aussi largement supporté.