CSS: pas (: dernier enfant): après le sélecteur

370

J'ai une liste d'éléments, dont le style est le suivant:

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>

Développer l'extrait

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

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

css css-selectors pseudo-element

— Matt Clarkson
source

1

Ce comportement semble être un bogue dans Chrome 10. Il fonctionne pour moi dans Firefox 3.5.

— Duri

6

En fait, je viens d'exécuter l'extrait de code en 2018 avec le dernier Chrome et a fonctionné comme prévu.

— atoth

433

Si c'est un problème avec le sélecteur not, vous pouvez les régler tous et remplacer le dernier

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

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

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

— imma
source

12

C'est en fait le seul moyen de le faire fonctionner dès IE8 (désolé, pas de guépard pour IE7 et versions antérieures). li:not(:first-child):beforeest un peu trop effrayant pour les anciennes versions d'Internet Explorer.

— Sandy Gifford

240

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

— Vivek
source

4

@ScottBeeson C'est le meilleur avertissement pour navigateur moderne, mais le travail de réponse accepté avec les anciens navigateurs. (Je suis d'accord avec vous, ce devrait être celui qui est accepté)

— Arthur

25

Votre exemple écrit fonctionne parfaitement dans Chrome 11 pour moi. Peut-être que votre navigateur ne prend tout simplement pas en charge:not() sélecteur?

Vous devrez peut-être utiliser JavaScript ou similaire pour effectuer ce cross-browser. jQuery implémente : not () dans son API de sélection.

— Liza Daly
source

8

J'ai résolu cela en faisant li:not(:first-child):beforeet en ajoutant la barre verticale avant. Je travaillais avec la version stable de Chrome qui ne semble pas prendre en charge le dernier enfant. La construction des Canaries le fait. Merci pour la réponse.

— Matt Clarkson

On dirait que Chrome ne le prend pas en charge même en 2013?

— MikkoP

20

Un exemple utilisant CSS

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

— Lorena Pita
source

20

Pour moi ça marche bien

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

— Ashad Nasim
source

1

Cette réponse pourrait concerner SCSS plutôt que CSS.

— Chris Walsh

10

Votre exemple ne fonctionne pas dans IE pour moi, vous devez spécifier l'en- tête Doctype dans votre document pour rendre votre page de manière standard dans IE pour utiliser la propriété CSS de 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 3

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

Mais vous devez toujours spécifier Doctype

Et la troisième façon consiste à utiliser JQuery avec un script comme celui-ci:

<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 méthode est que vous n'avez pas besoin de spécifier doctype et jQuery se chargera de la compatibilité.

— Martin Kunc
source

6

<! DOCTYPE html> est la nouvelle norme HTML5.

— Matt Clarkson

1

C'est une façon impressionnante et moderne de gérer cela. Je me débattais avec: dernier enfant, puis j'ai trouvé votre réponse. Celui-ci est parfait! : non (: dernier de type): après

— Firze

1

Retirer le: avant dernier enfant et le: après et utilisé

 ul li:not(last-child){
 content:' |';
}

J'espère que ça devrait marcher

— Jaylukmann
source

-2

Vous pouvez essayer ceci, je sais que ce ne sont pas les réponses que vous cherchez mais le concept est le même.

Où vous définissez les styles pour tous les enfants, puis supprimez-le du dernier enfant.

Extrait de code

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Image

— Yashu Mittal
source

2

Salut, puis-je savoir quel est cet éditeur s'il vous plaît? Ça à l'air bien.

— Zanecat

Il s'agit d'un petit morceau de code et n'importe qui peut facilement le mémoriser et le saisir.

— Yashu Mittal