CSS: no (: last-child): después de selector de

220

Tengo una lista de elementos, que son de estilo como esto:CSS: no (: last-child): después de selector de

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>

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

se puede ver la definición del selector de :not()here

Fuente

2011-03-27 Matt Clarkson

Este comportamiento parece que hay un error en Chrome 10. A mí me funciona en Firefox 3.5. – duri

309

Si se trata de un problema con el no del selector, se puede establecer todos ellos y anular el último

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

o si se puede usar antes, no hay necesidad de que el último niño

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

Fuente

2012-03-16 12:03:48 imma

Esta es la única forma de que funcione en IE8 (lo siento, no hay cheetos para IE7 y versiones anteriores). 'li: not (: first-child): before' es un poco demasiado aterrador para las versiones anteriores de Internet Explorer. –

Su ejemplo como obras escritas perfectamente en Chrome 11 para mí. Tal vez su navegador simplemente no es compatible con el selector :not()?

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

Fuente

2011-03-27 14:47:12

Lo resolví haciendo 'li: not (: first-child): before' y agregando la barra vertical antes. Estaba trabajando con la versión estable de Chrome que no parece ser compatible con last-child. La construcción Canary sí. Gracias por la respuesta. –

Parece que Chrome no lo admite incluso en 2013? – MikkoP

Su ejemplo no funciona en IE para mí, tiene que especificar la cabecera Doctype en el documento para hacer que su página en forma estándar en IE para utilizar 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>

Segundo forma es utilizar CSS 3 selectores

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

Pero todavía se necesita especificar Doctype

Y tercera forma es utilizar jQuery con alguna secuencia de comandos como 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>

ventaja de tercera manera es que usted no tiene que especificar tipo de documento y jQuery se hará cargo de la compatibilidad.

Fuente

2011-03-27 15:28:02

es el nuevo estándar HTML5. –

Esta es una manera asombrosa y moderna de lidiar con esto. Estaba luchando con: último hijo, entonces encontré tu respuesta. ¡Este es perfecto!: no (: último-de-tipo): después de – Firze

130

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

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

Fuente

2013-06-17 10:06:39 Vivek

Gracias, esto es similar a lo que usé al final: 'li: not (: first-child): before'. Ver el comentario en la publicación respondida. –

Esto es hermoso. ¡No estoy seguro de por qué no es la respuesta aceptada! –

Un ejemplo usando CSS

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

Fuente

2017-07-26 20:57:11

CSS: no (: last-child): después de selector de

Respuesta

Cuestiones relacionadas