Mon but est d'appliquer le CSS sur la dernière page de l'écran. li mais il ne le fait pas.
#refundReasonMenu #nav li:last-child {
border-bottom: 1px solid #b5b5b5;
}
<div id="refundReasonMenu">
<ul id="nav">
<li><a id="abc" href="#">abcde</a></li>
<li><a id="def" href="#">xyz</a></li>
</ul>
</div>Comment puis-je sélectionner sólo le dernier enfant ?
El :last-child ne peut toujours pas être utilisé de manière fiable dans tous les navigateurs. En particulier, les versions d'Internet Explorer < 9, et Safari < 3.2 définitivement ne le soutenez pas bien qu'Internet Explorer 7 et Safari 3.2 hacer soutien :first-child curieusement.
Votre meilleure chance est d'ajouter explicitement un last-child (ou une classe similaire) à cet élément, et appliquer li.last-child à la place.
IIRC, IE7 ne le supporte pas, et first-child est peu clair. J'opterais pour la méthode consistant à ajouter votre propre classe, elle est beaucoup plus fiable.
J'ai testé ce qui précède sur Safari 4 et cela a fonctionné correctement. Mais le support en général est variable, donc vous devrez essayer autre chose.
Une autre solution qui pourrait vous convenir est d'inverser la relation. Ainsi, vous définissez la bordure pour tous les éléments de la liste. Vous utiliseriez ensuite l'option first-child pour éliminer la bordure du premier élément. L'option first-child est prise en charge de manière statique par tous les navigateurs (ce qui signifie qu'elle ne peut pas être ajoutée de manière dynamique par le biais d'un autre code, mais first-child est un sélecteur CSS2, tandis que last-child a été ajouté dans la spécification CSS3).
Remarque : cela ne fonctionne comme prévu que si la liste ne comporte que deux éléments, comme dans votre exemple. Les bordures seront appliquées à tout troisième élément et aux suivants.
Si vous pensez que vous pouvez utiliser Javascript, alors puisque jQuery supporte last-child vous pouvez utiliser la méthode css de jQuery et la bonne chose est qu'elle est compatible avec presque tous les navigateurs.
Exemple de code :
$(function(){
$("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})Vous pouvez trouver plus d'informations à ce sujet ici : http://api.jquery.com/css/#css2
C'est beaucoup mieux de faire quelque chose comme $("#nav li:last-child").addClass('last-child') afin que vous puissiez conserver votre style dans vos feuilles de style.
C'est plus propre que la première solution puisque c'est géré automatiquement. Mais je suis aussi d'accord avec Jason.
En fait, IE7 ne charge pas une classe qui possède les deux éléments suivants div:last-child y div.last-child . Il semble qu'elle considère le :last-child n'est pas valide et toute classe comportant ce pseudo-sélecteur ne sera pas appliquée.
Si vous avez souvent besoin de sélecteurs CSS3, vous pouvez toujours utiliser la bibliothèque selectivizr sur votre site :
Il s'agit d'un script JS qui ajoute la prise en charge de presque tous les sélecteurs CSS3 aux navigateurs qui ne les prendraient pas en charge autrement.
Mettez-le dans votre <head> avec un conditionnel IE :
<!--[if (gte IE 6)&(lte IE 8)]>
<script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]--> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
