CSS: last-child

Question

J'ai un div#content avec beaucoup de div.item dedans. Lorsque vous utilisez :last-child pour faire la dernière div.item sans border-bottom, c'est OK. Mais, comme le contenu est ajouté dynamiquement en utilisant les résultats de php et mysql, j'utilise une table de pagination conditionnelle qui sera ajoutée après la dernière div.item, ce qui signifie au bas de la div#content. Voici le problème car le CSS :last-child ne reconnaîtra pas le dernier div.item comme le dernier enfant. mon CSS ressemble à:

div#content div.item:last-child { 
    border-bottom: none; 
} 

comme vous pouvez le voir, je suis la définition que le dernier enfant id un tel div.item

Toutes les suggestions s'il vous plaît. Merci d'avance.

!!!!! S'il vous plaît noter que le problème n'est pas dans le fait que le contenu est dynamique, mais dans le fait que le CSS: last-child ne reconnaît pas le div.item comme le dernier enfant, mais le dernier élément dans le div # contenu, malgré le dire CSS que c'est:

div#content div.item:last-child 

Answer 1

Une possibilité je peux penser est que vous annexant des éléments qui ne sont pas <div> s et/ou ne disposent pas de la classe item. Vérifiez la sortie de votre script PHP/MySQL et voyez s'il y a des éléments non div.item en plus (en termes DOM) les éléments div.item.

Ces éléments ne correspondront pas le sélecteur:

div#content div.item:last-child 

Ce sélecteur ne trouve que <div> s avec item classe, qui sont le dernier enfant de div#content.

Voici un exemple.

Avant annexant

<div id="content"> 
    <div class="item"></div> <!-- [1] Selected --> 
</div> 

Après avoir ajouté

<div id="content"> 
    <div class="item"></div> <!-- [2] Not selected --> 
    <div></div>    <!-- [3] Not selected --> 
</div> 

Qu'est-ce qui est choisi, ce qui est pas, et pourquoi ?

1. sélectionnés
   Cet élément <div> a la classe item, et il est le dernier enfant de div#content.

   Il correspond exactement au sélecteur ci-dessus.

2. Non sélectionné
   Cet élément <div> a la classe item, mais il est pas le dernier enfant de div#content.

   Il ne correspond pas exactement au sélecteur ci-dessus; cependant, il peut éventuellement correspondre à l'un de ces sélecteurs:

   /* Any div.item inside div#content */ 
   div#content div.item 
   
   /* The last div.item child of its parent only */ 
   div#content div.item:last-of-type 
   

3. Non sélectionné
   Bien que cet élément <div> est le dernier enfant, il ne pas ont la classe item.

   Il ne correspond pas exactement au sélecteur ci-dessus; cependant, il peut éventuellement correspondre à ceci:

   /* Any div that happens to be the last child of its parent */ 
   div#content div:last-child 
   

Answer 2

vous pouvez utiliser javascript pour rafraîchir seulement le CSS. Voir ici: http://paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/

Une autre approche serait d'utiliser une bibliothèque comme jQuery et de déclencher cette ligne de script chaque fois que vous ajoutez de nouvelles divs. (Ou peut-être que vous utilisez une autre bibliothèque js, comme vous dites que vous êtes dynamique ajouterez divs à la page)

$('div#content div.item:last-child').css('borderBottom','none'); 

vous pourriez avoir besoin de réinitialiser les frontières avant de faire ce qui précède cependant. c'est-à-dire que la précédente div précédente peut toujours ne pas avoir le fond de la bordure. Réinitialisez toutes les bordures, puis lancez le script pour supprimer la bordure du dernier.

Answer 3

Il semble que les éléments ajoutés de manière dinamique ne permettent pas au moteur de disposition de ré-exécuter certaines règles CSS comme: last-child.

Je pense que vous pouvez relire/recharger le fichier CSS en appliquant la règle. Je ne sais pas, c'est une supposition.

Une autre possibilité est de définir les styles de façon dynamique.

---

EDIT: Il semble que vous ayez un problème CSS x Browser.

Check this out: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors