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




title html (4)

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 niños y luego quitándolos del último niño.

Fragmento de código

li
  margin-right: 10px

  &:last-child
    margin-right: 0

Imagen

Tengo una lista de elementos, que tienen un estilo como este:

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 One | Two | Three | Four | Five | One | Two | Three | Four | Five | en lugar de One | Two | Three | Four | Five One | Two | Three | Four | Five

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

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


Si es 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 es necesario el último hijo

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

Su muestra no funciona en IE para mí, tiene que especificar el encabezado Doctype en su documento para representar su página de manera estándar en IE para usar la propiedad de contenido 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 segunda forma es usar los selectores de CSS 3.

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

Pero todavía tienes que especificar Doctype

Y la tercera forma es usar JQuery con algunos scripts como los siguientes:

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


Todas las cosas parecen correctas. Es posible que desee utilizar el siguiente selector css en lugar de lo que utilizó.

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




pseudo-element