Utiliser le sélecteur dernier enfant

Mon objective est d’appliquer le CSS sur le dernier li , mais cela ne se fait pas.

Comment puis-je sélectionner uniquement le dernier enfant?

La pseudo :last-child classe :last-child ne peut toujours pas être utilisée de manière fiable sur les navigateurs. En particulier, les versions d’Internet Explorer <9 et Safari <3.2 ne le prennent pas en charge , bien qu'Internet Explorer 7 et Safari 3.2 prennent en charge :first-child , curieusement.

Votre meilleur pari est d’append explicitement une classe last-child (ou similaire) à cet élément, et d’appliquer li.last-child .

Une autre solution qui pourrait fonctionner pour vous est d’inverser la relation. Vous définissez donc la bordure pour tous les éléments de la liste. Vous utiliseriez alors first-child pour éliminer la bordure du premier élément. Le premier enfant est pris en charge de manière statique dans tous les navigateurs (ce qui signifie qu’il ne peut pas être ajouté dynamicment via un autre code, mais que first-child est un sélecteur CSS2, tandis que last-child a été ajouté dans la spécification CSS3)

Remarque: Cela ne fonctionne que de la manière prévue si vous n’avez que 2 éléments dans la liste, comme votre exemple. Tout 3ème élément et on y appliquera des bordures.

Si vous pensez pouvoir utiliser Javascript, alors depuis que jQuery supporte last-child , vous pouvez utiliser la méthode css de jQuery et le bon côté c’est qu’il supporte presque tous les navigateurs

Exemple de code:

 $(function(){ $("#nav li:last-child").css("border-bottom","1px solid #b5b5b5") }) 

Vous pouvez trouver plus d’informations sur ici: http://api.jquery.com/css/#css2

Si le nombre d’éléments de la liste est fixe, vous pouvez utiliser le sélecteur adjacent, par exemple si vous n’avez que trois éléments

  • , vous pouvez sélectionner le dernier

  • avec:

     #nav li+li+li { border-bottom: 1px solid #b5b5b5; } 

    Si vous avez souvent besoin de sélecteurs CSS3, vous pouvez toujours utiliser la bibliothèque selectivizr sur votre site:

    http://selectivizr.com/

    C’est un script JS qui prend en charge la quasi-totalité des sélecteurs CSS3 pour les navigateurs qui ne les prendraient pas en charge.

    Jetez-le dans votre avec un IE conditionnel:

      

    pseudo-classe du dernier enfant ne fonctionne pas dans IE

    Compatibilité CSS et Internet Explorer

    Sélecteurs CSS IE7: comment ils échouent

    Au lieu d’utiliser une classe, vous pouvez utiliser une liste détaillée, en définissant les éléments dt enfant comme ayant un style et les éléments dd enfant en avoir un autre. Votre exemple deviendrait:

     #refundReasonMenu #nav li:dd { border-bottom: 1px solid #b5b5b5; } 

    html:

      

    Aucune de ces méthodes n’est meilleure que l’autre et c’est simplement par préférence personnelle.

    Une autre façon de le faire est d’utiliser le sélecteur last-child dans jQuery, puis d’utiliser la méthode .css (). Soyez fatigué parce que certaines personnes sont encore à l’âge de pierre en utilisant JavaScript navigateurs désactivés.

    Pourquoi ne pas appliquer la bordure au bas de l’UL?

     #refundReasonMenu #nav ul { border-bottom: 1px solid #b5b5b5; } 

    Si vous flottez les éléments, vous pouvez inverser l’ordre

    c.-à-d. float: right; au lieu de float: left;

    Et puis utilisez cette méthode pour sélectionner le premier enfant d’une classe.

     /* 1: Apply style to ALL instances */ #header .some-class { padding-right: 0; } /* 2: Remove style from ALL instances except FIRST instance */ #header .some-class~.some-class { padding-right: 20px; } 

    Ceci est en train d’appliquer la classe à la dernière instance uniquement parce qu’elle est maintenant dans l’ordre inverse.

    Voici un exemple de travail pour vous:

     < !doctype html> CSS Test       

    C’est difficile à dire sans voir le rest de votre CSS, mais essayez d’append !important devant la couleur de la bordure, pour le rendre ainsi:

     #refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5 !important; }