Css spécificité :dernier enfant

Je voudrais utiliser ce qui suit pour cible le dernier lien (a) de la dernière ul à l'intérieur de mon div. Donc, c'est ce qui m'est venu à l'esprit:

#menu ul:last-child li a {
       /*.....*/
}

Je ne peux pas ajouter manuellement une classe à l'élément, et même si je voulais le faire dynamiquement, j'aurais encore à la cible de l'élément de la façon décrite ci-dessus.

Des idées pourquoi cela ne fonctionne pas?

Il sera bien si vous fournirez de l'exemple de code HTML
désolé j'aurais ci .. mais j'avais juste besoin d'idées ... de toute façon, pour des raisons inexplicables, aucun de mes navigateurs semblent répondre à :dernier enfant ou :premier enfant. Je viens de le faire fonctionner en jQuery : $('#menu ul li a:last').css({});

OriginalL'auteur Turbodurso | 2009-11-04

  1. 9

    Si vous voulez le dernier lien dans le dernier ul (en supposant que le lien est à l'intérieur d'un li-élément), c'est ce que vous voulez:

    #menu ul:last-child li:last-child a {
       /*.....*/
}
    • #menu renvoie l'élément du menu.
    • ul:last-child retourne la dernière ul dans #menu
    • li:last-child retourne la dernière li à l'intérieur de cette ul

    N'ai pas essayé, mais je suppose que ce serait le travail.

    Elle fonctionne.....mais juste un doute au sujet de votre explication.....N'est-ce pas de cette façon... #menu ul sélectionne tous les uls dans #menu; :dernier enfant li sélectionne le dernier li dans tous les menus uls; et :dernier enfant d'une sélectionne le dernier lien dans le dernier li?J'ai simplement utilisé pour une navigation horizontale, où le dernier li n'a pas un sous-menu ul, et il sélectionne que particulier li.......
    exactement ce dont j'avais besoin +1

    OriginalL'auteur Arve Systad

  2. 4

    Je suis seulement deviner ce que votre code HTML est, mais:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" >
    div ul:last-child li:last-child a:last-child {
        background-color: red;
    }
</style>
</head>
<body>
<div>
    <ul><li>First list</li></ul>
    <ul><li>Second list</li></ul>
    <ul>
        <li>Item 1</li>
        <li>
            <a href="#">First Link</a>
            <a href="#">Last Link</a>
        </li>
    </ul>
</div>
</body>
</html>

    OriginalL'auteur MiseryIndex

  3. 0

    J'ai testé votre code dans safari (version 4.0.3) et firefox(3.5.4) et tout fonctionne très bien, je ne sais pas avec IE8!

    Considérer que c'est un nouveau pseudo-classe (sélecteur) défini dans la norme CSS3 qui n'est pas complètement pris en charge à partir de tous les navigateurs et est pris en charge par les plus anciens navigateurs!

    En règle générale, pour des raisons de performances, je vous suggère d'éviter CSS directives avec plus de 2 niveau (maximum 3 si vous en avez vraiment besoin)!

    Cependant, je pense que si vous ne voulez pas appliquer le style directement à un élément balisé, vous devez trouver une solution d'activer javascript!

    OriginalL'auteur BitDrink

  4. 0

    CSS last-child ne fonctionne pas dans IE, y compris IE8.

    Il faut travailler dans tous les autres navigateurs, mais si vous prévoyez de l'utiliser sur un site qui a besoin de soutien c'est à dire, vous aurez besoin de travailler sur une autre façon de le faire.

    Cette page présente une liste complète des sélecteurs CSS, et les navigateurs qui les soutiennent:
    http://quirksmode.org/css/contents.html

    :dernier enfant fonctionne dans internet explorer 9 et plus. :first-child travaille depuis IE7.
    vous êtes correct. Gardez à l'esprit que IE9 n'avaient pas été libérés lors de cette réponse a été publiée.
    bien sûr, la réponse a été posté plus de 7 ans. C'est juste une mise à jour.

    OriginalL'auteur Spudley