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

Resuelto Matt Clarkson asked hace 13 años • 8 respuestas

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

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

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

¿Alguien sabe cómo seleccionar con CSS todos los elementos excepto el último?

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

Matt Clarkson avatar Mar 27 '11 21:03 Matt Clarkson
Aceptado

Si se trata de un problema con el selector not, puede configurarlos todos y anular el último.

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

o si puedes usarlo antes, no es necesario el último hijo

li+li:before
{
  content: '| ';
}
imma avatar Mar 16 '2012 12:03 imma

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

ul > li:not(:last-child)::after
Vivek avatar Jun 17 '2013 10:06 Vivek