examples - title css style
CSS: no(: último hijo): después del selector (6)
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 ejemplo como escrito funciona perfectamente en Chrome 11 para mí. Tal vez su navegador simplemente no admite el selector " :not() ?
Es posible que necesite usar JavaScript o similar para lograr este navegador cruzado. jQuery implementa :not() en su API de selector.
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
Un ejemplo usando CSS
ul li:not(:last-child){
border-right: 1px solid rgba(153, 151, 151, 0.75);
}