421 votes

CSS : non ( : last-child) : après le sélecteur

J’ai une liste d’éléments :

Et de style comme ceci :

Sorties au lieu de

Quelqu'un sait comment CSS sélectionnez tous, mais le dernier élément ?

Vous pouvez voir la définition de la `` Sélecteur ici

474voto

imma Points 1031

Si c’est un problème avec le not selector, vous pouvez définir chacun d’eux et de substituer une dernière

ou si vous pouvez utiliser avant, pas besoin de l’enfant en dernier

269voto

Vivek Points 311

Toutes choses semble correct. Vous pouvez utiliser le sélecteur css suivant au lieu de ce que vous avez utilisé.

26voto

Liza Daly Points 1855

Votre exemple comme des œuvres écrites en Chrome 11 parfaite pour moi. Peut-être votre navigateur juste ne supporte pas la `` Sélecteur ?

Vous devrez peut-être utiliser JavaScript ou similaire pour accomplir cet Croix-navigateur. jQuery implémente : not() dans son sélecteur d’API.

11voto

Martin Kunc Points 36

Votre exemple ne fonctionne pas dans IE pour moi, vous devez spécifier le Doctype en-tête de votre document pour le rendu de votre page de manière standard dans IE pour utiliser le contenu d'une propriété CSS:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

La deuxième façon est d'utiliser des sélecteurs CSS 3

li:not(:last-of-type):after
{
    content:           " |";
}

Mais vous avez encore besoin de spécifier Doctype

Et la troisième façon est d'utiliser JQuery avec un script comme suit:

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

Parti de la troisième voie, c'est que vous n'avez pas à spécifier doctype et jQuery va prendre soin de compatibilité.

Prograide.com

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.

Powered by:

X