CSS: no (: último hijo): después del selector

370

Tengo una lista de elementos, que tienen el siguiente estilo:

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>

Expandir fragmento

¿Alguien sabe cómo CSS seleccionar todo menos el último elemento?

Puedes ver la definición del :not()selector aquí

css css-selectors pseudo-element Matt Clarkson
fuente

1

Este comportamiento parece ser un error en Chrome 10. Me funciona en Firefox 3.5.

duri

66

En realidad, solo ejecuté el fragmento en 2018 con el último Chrome y funcionó como se esperaba.

atoth

433

Si hay un problema con el selector no, puede configurarlos todos y anular el último.

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

o si puede usarlo antes, no necesita el último hijo

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

imma
fuente

12

Esta es en realidad la única forma de hacerlo funcionar desde IE8 (lo siento, no hay cheetos para IE7 y versiones anteriores). li:not(:first-child):beforees un poco demasiado aterrador para las versiones anteriores de Internet Explorer para abordar.

Sandy Gifford

240

Todo parece correcto. Es posible que desee utilizar el siguiente selector de CSS en lugar de lo que utilizó.

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

Vivek
fuente

44

@ScottBeeson Este es el mejor procesador para navegadores modernos, pero aceptó el trabajo de respuesta con navegadores antiguos. (Estoy de acuerdo con usted, este debería ser el aceptado)

Arthur

25

Su ejemplo como está escrito funciona perfectamente en Chrome 11 para mí. ¿Quizás su navegador simplemente no es compatible con el :not()selector?

Es posible que necesite usar JavaScript o similar para lograr este navegador cruzado. jQuery implementa : not () en su selector API.

Liza Daly
fuente

8

Resolví esto haciendo li:not(:first-child):beforey agregando la barra vertical antes. Estaba trabajando con la versión estable de Chrome que no parece admitir el último hijo. La construcción canaria sí. Gracias por la respuesta aunque.

Matt Clarkson

¿Parece que Chrome no lo admite incluso en 2013?

MikkoP

20

Un ejemplo usando CSS

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

Lorena Pita
fuente

20

Para mi funciona bien

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

Ashad Nasim
fuente

1

Esta respuesta podría relacionarse con SCSS en lugar de CSS.

Chris Walsh

10

Su muestra no funciona en IE para mí, debe especificar el encabezado Doctype en su documento para representar su página de manera estándar en IE para usar la propiedad CSS de contenido:

<!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 segunda forma es usar selectores CSS 3

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

Pero aún necesita especificar Doctype

Y la tercera forma es usar JQuery con algún script como el siguiente:

<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>

La ventaja de la tercera forma es que no tiene que especificar doctype y jQuery se encargará de la compatibilidad.

Martin Kunc
fuente

66

<! DOCTYPE html> es el nuevo estándar HTML5.

Matt Clarkson

1

Esta es una forma increíble y moderna de lidiar con esto. Estaba luchando con: último hijo, luego encontré tu respuesta. Este es perfecto! : no (: último tipo): después

Firze

1

Elimine el: before last-child y el: after y used

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

Con suerte, debería funcionar

Jaylukmann
fuente

-2

Puedes probar esto, sé que no son las respuestas que estás buscando, pero el concepto es el mismo.

Donde está configurando los estilos para todos los elementos secundarios y luego eliminándolo del último elemento secundario.

Fragmento de código

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Imagen

Yashu Mittal
fuente

2

Hola, ¿puedo saber qué es este editor por favor? Se ve bien.

Zanecat

Es un código pequeño y cualquiera puede memorizarlo y escribirlo fácilmente.

Yashu Mittal

CSS: no (: último hijo): después del selector

Respuestas: