CSS :dernier enfant
J'ai un div#content
avec de nombreux div.item
à l'intérieur.
Lors de l'utilisation de :last-child
de faire la dernière div.item
sans border-bottom
, c'est OK.
Mais, comme le contenu est dynamiquement ajoutés à l'aide de php et mysql résultats, je suis en utilisant une condition de la pagination de la table qui sera ajouté après le dernier div.item
qui signifie au bas de la div#content
. Ici sera le problème dans le CSS :last-child
ne reconnaîtra pas le dernier div.item
que 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 à l'id d'une telle div.item
Des suggestions s'il vous plaît. merci à l'avance.
!!!!! Veuillez noter que le problème n'est pas dans le fait que le contenu est dynamique, mais dans le fait que le CSS :dernier enfant ne reconnaît pas la div.l'article que le dernier enfant, mais le dernier élément dans la div#contenu, malgré disant le CSS qu'il est:
div#content div.item:last-child
:last-child
est pas pris en charge dans IE. Quel navigateur utilisez-vous?Vit: eh Bien, si l'OP dit, il fonctionne très bien au premier abord, il ne doit pas utiliser IE.
Êtes-vous sûr que vous êtes seulement en ajoutant
div.item
à l'enfant et non pas autre chose?OriginalL'auteur medk | 2010-10-08
Vous devez vous connecter pour publier un commentaire.
Un possibilité je peux penser, c'est que vous êtes en ajoutant des éléments qui ne sont pas
<div>
s et/ou n'ont pas lesitem
classe. Vérifiez la sortie de PHP/MySQL script et voir s'il y a des non-div.item
éléments d'à côté (dans les DOM) ladiv.item
éléments.Ces éléments ne sont pas de match le sélecteur:
Que le sélecteur ne trouve que
<div>
s avecitem
classe, qui sont le dernier enfant dediv#content
.Voici un exemple.
Avant d'ajouter
Après l'ajout
Ce qui est sélectionné, ce qui ne l'est pas, et pourquoi?
Sélectionné
Cette
<div>
élément a laitem
classe, et il est le dernier enfant dediv#content
.Il correspond exactement au-dessus du sélecteur.
Pas sélectionné
Cette
<div>
élément a laitem
classe, mais est pas le dernier enfant dediv#content
.Il ne correspond pas exactement au-dessus du sélecteur; cependant, il peut éventuellement correspondre à l'un de ces sélecteurs:
Pas sélectionné
Bien que cette
<div>
élément est le dernier enfant, il ne pas ont laitem
classe.Il ne correspond pas exactement au-dessus du sélecteur; cependant, il peut éventuellement correspondre à ceci:
Belle explication. Soin de l'étendre à parler de pourquoi
div#content div.item:not(.dont-want):last-of-type
ne fonctionne pas comme prévu?Peno: Scratch mon commentaire précédent. C'est parce que
:not()
est toujours traitée après:last-of-type
. Cela signifie que le:last-of-type
élément est coché, puis la jeter si elle frappe le:not()
. Voir cette modification jsFiddle exemple.Je comprends, donc, même si le pas de sélecteur vient en premier, n'est pas traité en dernier. C'est bien dommage. Avez-vous de toute façon, avec les css et sans s'appuyer sur nième*, pour accomplir cette?
Peno: ne Peut pas penser à tout, mais c'est peut être juste moi en train de taper ceci à 2 heures du matin 😛
OriginalL'auteur BoltClock
Il semble en ajoutant des éléments dinamically ne pas faire la mise en page du moteur de re-exécuter certaines règles CSS comme :dernier enfant.
Je pense que vous pouvez re-lecture/recharger le fichier CSS, rendant la règle s'applique. Ne sais pas, c'est une supposition.
Une autre possibilité est dinamically définir les styles.
EDIT: Il semble que vous avez un CSS x Navigateur problème.
Check this out: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Selectors
alors, voyons si je comprends bien... vous n'avez jamais voir ce :dernier enfant de la règle de travail avant? Je pensais que c'était un js-dynamique générée. Si c'est avant l'envoi au client, je suppose que votre règle CSS n'a jamais fonctionné ensuite. Dans ce cas, pouvez-vous me dire quel navigateur vous utilisez pour tester?
OriginalL'auteur Dave
vous pouvez utiliser javascript pour actualiser le CSS. Voir ici: http://paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/
Une autre approche serait d'utiliser une librairie comme jQuery et le feu de cette ligne de script à chaque fois que vous ajoutez de nouveaux divs. (ou peut-être vous êtes en utilisant une autre bibliothèque js, autant vous dire que vous êtes l'ajout dynamique de divs de la page)
vous devrez peut-être réinitialiser les frontières d'avant vous faites le au-dessus. c'est à dire le précédent de la "dernière" div peut quand même avoir de la frontière bas. afin de réinitialiser toutes les frontières puis le feu le script pour supprimer la bordure pour le dernier.
ok, alors l'exécution du javascript après que la page a rendu serait une de vos options comme je l'ai suggéré.
ok merci beaucoup 🙂
OriginalL'auteur Moin Zaman