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>

Salidas en One | Two | Three | Four | Five |lugar deOne | Two | Three | Four | Five

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

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


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

Respuestas:


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: '| ';
}

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

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.


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);
    }

20

Para mi funciona bien

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

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.


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


-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

ingrese la descripción de la imagen aquí


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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.