web-dev-qa-db-fra.com

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

J'ai une liste d'éléments, qui sont stylés comme ceci:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

Sorties One | Two | Three | Four | Five | au lieu de One | Two | Three | Four | Five

Quelqu'un sait comment CSS sélectionner tout sauf le dernier élément?

Vous pouvez voir la définition du sélecteur :not()ici

csscss-selectorspseudo-element
321
Matt Clarkson

S'il y a un problème avec le sélecteur non, vous pouvez tous les définir et remplacer le dernier.

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

ou si vous pouvez utiliser avant, pas besoin de last-child

li+li:before
{
  content: '| ';
}
396
imma

Tout semble correct. Vous voudrez peut-être utiliser le sélecteur CSS suivant au lieu de ce que vous avez utilisé.

ul > li:not(:last-child):after
215
Vivek

Votre exemple, tel qu’écrit, fonctionne parfaitement dans Chrome 11 pour moi. Peut-être que votre navigateur ne supporte pas le sélecteur :not()?

Vous devrez peut-être utiliser JavaScript ou un logiciel similaire pour réaliser ce navigateur croisé. jQuery implémente : not () dans son API de sélecteur.

25
Liza Daly

Un exemple utilisant CSS

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }
15
Lorena Pita

Pour moi ça marche bien

&:not(:last-child){
            text-transform: uppercase;
        }
13
jsRook

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

<!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 consiste à utiliser les sélecteurs CSS

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

Mais vous devez encore spécifier Doctype

Et la troisième façon consiste à 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>

L'avantage de la troisième manière est que vous n'avez pas à spécifier doctype et que jQuery se chargera de la compatibilité.

10
Martin Kunc