Combinación de pseudo-elementos CSS, ": after" the ": last-child"

102

Quiero hacer listas "gramaticalmente correctas" usando CSS. Esto es lo que tengo hasta ahora:Combinación de pseudo-elementos CSS, ": after" the ": last-child"

Las etiquetas <li> se muestran horizontalmente con comas después de ellas.

li { display: inline; list-style-type: none; }

li:after { content: ", "; }

que funciona, pero quiero el "último hijo" para tener un punto en vez de coma. Y, si es posible, me gustaría poner "y" antes del "último hijo" también. Las listas que estoy diseñando se generan dinámicamente, por lo que no puedo simplemente dar una clase a los "últimos niños". No puede combinar pseudo-elementos, pero ese es básicamente el efecto que quiero lograr.

li:last-child li:before { content: "and "; }

li:last-child li:after { content: "."; }

¿Cómo puedo hacer este trabajo?

Fuente

2010-02-28 Derek

realmente no deberías usar CSS para esto. –

Debo estar de acuerdo con Funky Dude un poco. Sería mejor hacer esto en el HTML (o codebehind si es más que simple HTML). CSS es para formatear :) – Zyphrax

+13

Yo ... personalmente, tiendo a argumentar que, en una lista, el formateo es una satisfacción, no una necesidad. Ese ser el caso usando CSS permite adiciones o eliminaciones más simples de la lista, que usar la codificación html o del lado del servidor. Pero soy extraño así, a veces, y, sinceramente mmm, etc ... =) –

145

Esto funciona :) (espero multi-navegador, Firefox le gusta)

li { display: inline; list-style-type: none; } 
 
li:after { content: ", "; } 
 
li:last-child:before { content: "and "; } 
 
li:last-child:after { content: "."; }

<html> 
 
    <body> 
 
    <ul> 
 
     <li>One</li> 
 
     <li>Two</li> 
 
     <li>Three</li> 
 
    </ul> 
 
    </body> 
 
</html>

Fuente

2010-02-28 16:14:26 Zyphrax

Ejemplo en vivo en http://jsfiddle.net/g3bz3/ – mskfisher

Un problema similar es el caso en el que se separan elementos de menú con caracteres de tubería. La misma solución funciona. Sin embargo, el atributo de contenido final debe establecerse en {content: none;} para eliminar el carácter de tubería final. – aridlehoover

El pedido es importante también. 'li: last-child: after' funciona pero' li: after: last-child' no. –

Usted puede combinar pseudo-elementos! Lo siento chicos, calculé esto yo mismo poco después de publicar la pregunta. Tal vez se usa con menos frecuencia debido a problemas de compatibilidad.

li:last-child:before { content: "and "; }

li:last-child:after { content: "."; }

Esto funciona a las mil maravillas. CSS es algo asombroso

Fuente

2010-02-28 16:14:43 Derek

Tan increíble que incluso puedes usarlo para cosas que ni siquiera están pensadas para ... – Guffa

+10

Esta es una especie de "esquina de recolector de liendres", pero "last-child" es en realidad una pseudo - ** clase **, mientras que "antes" y "después" son pseudo-elementos. La diferencia es que una pseudo-clase es una restricción adicional en un elemento existente, mientras que un pseudo-elemento es efectivamente un elemento completamente nuevo en el árbol de presentación que se generó en CSS en lugar de en HTML. Puede combinarlos por este motivo: el 'last-child' es un modificador en' li', y luego de que haya seleccionado todos los elementos 'li' que son last children, entonces seleccione (y cree implícitamente) un nuevo elemento antes y después de cada uno –

Me gusta esto para el elemento de la lista en < menú > elementos. Considere el siguiente marcado:

<menu> 
    <li><a href="/member/profile">Profile</a></li> 
    <li><a href="/member/options">Options</a></li> 
    <li><a href="/member/logout">Logout</a></li> 
</menu>

que el estilo con el siguiente CSS:

menu > li { 
    display: inline; 
} 

menu > li:after { 
    content: ' | '; 
} 

menu > li:last-child:after { 
    content: ''; 
}

esta pantalla:

Profile | Options | Logout

Y esto es posible debido a lo que Martin Atkins explicó en su comentario

Fuente

2011-12-10 06:47:28

Estoy utilizando la misma técnica en una consulta de medios que efectivamente se convierte una lista de viñetas en una lista en línea en dispositivos más pequeños, ya que ahorran espacio.

Así que el paso de:

tarea de la Lista 1
tarea de la Lista 2
tarea de la Lista 3

elemento de lista 1; Lista de elementos 2; Lista de elementos 3.

Fuente

2013-12-04 02:45:14 user3064058

Está tratando de hacer esto con CSS. Su método está codificado en HTML. Este método se usa normalmente para mostrar la navegación. – Sparatan117

Solo por mencionar, en CSS 3

: después

debe usarse como esto

:: después

De https://developer.mozilla.org/de/docs/Web/CSS/::after:

La notación :: after se introdujo en CSS 3 para establecer una discriminación entre pseudo-clases y pseudo-elementos. Navegadores también aceptan la notación: después introducidas en CSS 2.

lo que debe ser:

li { display: inline; list-style-type: none; } 
li::after { content: ", "; } 
li:last-child::before { content: "and "; } 
li:last-child::after { content: "."; }

Fuente

2013-12-21 15:13:39

Cada navegador que admite la sintaxis double colon '::' CSS3 también admite solo la sintaxis ':', pero IE 8 solo admite el punto y coma, por lo que, por ahora, se recomienda usar solo un punto para obtener la mejor compatibilidad con el navegador . '::' es el formato más nuevo sangrado para distinguir el pseudocontenido de los pseudo selectores. Si no necesita soporte para IE 8, puede usar el doble punto. De este [artículo] (https://css-tricks.com/almanac/selectors/a/after-and-before/) – JohnnyQ

@JohnnyQ gracias por ese tidbit de información –

IE 8 ya no es un jugador en términos de navegador estándares. No es compatible con Microsoft y no es compatible con HTML5 o CSS3 (pseudoelementos, transformaciones, etc.) Solía trabajar mucho en compatibilidad con versiones anteriores, hasta hace un año, yendo hasta IE6/IE7 (a través de Modernizr.) Hemos recorrido un largo camino, y si tiene la intención de que su sitio presente su identidad en línea a largo plazo, sin que se convierta en una solución miope, simplemente considere los ingresos que obtendría de alguien que utiliza IE8. Nada. Incluso las personas mayores, 20 años atrás de los tiempos, están usando tabletas y laptops 2 en 1 ahora. –

Añadiendo otra respuesta a esta pregunta porque necesitaba precisamente lo @derek estaba pidiendo y yo' Ya he avanzado un poco más antes de ver las respuestas aquí. Específicamente, necesitaba CSS que podría también cuenta para el caso con exactamente dos elementos de lista, donde la coma NO es deseada. A modo de ejemplo, algunos bylines de autoría que quería producir vería como los siguientes:

un autor: By Adam Smith.

Dos autores: By Adam Smith and Jane Doe.

tres autores: By Adam Smith, Jane Doe, and Frank Underwood.

las soluciones Ya se da aquí el trabajo para un autor y para 3 o más autores, pero se descuida de explicar el caso de los dos autores — donde el estilo "Oxford Comma" (también k nown como el estilo de "Harvard Comma" en algunas partes) no se aplica, es decir, no debería haber coma antes de la conjunción.

Después de una tarde de retoques, que habían llegado con lo siguiente:

<html> 
<head> 
    <style type="text/css"> 
    .byline-list { 
     list-style: none; 
     padding: 0; 
     margin: 0; 
    } 
    .byline-list > li { 
     display: inline; 
     padding: 0; 
     margin: 0; 
    } 
    .byline-list > li::before { 
     content: ", "; 
    } 
    .byline-list > li:last-child::before { 
     content: ", and "; 
    } 
    .byline-list > li:first-child + li:last-child::before { 
     content: " and "; 
    } 
    .byline-list > li:first-child::before { 
     content: "By "; 
    } 
    .byline-list > li:last-child::after { 
     content: "."; 
    } 
    </style> 
</head> 
<body> 
    <ul class="byline-list"> 
    <li>Adam Smith</li> 
    </ul> 
    <ul class="byline-list"> 
    <li>Adam Smith</li><li>Jane Doe</li> 
    </ul> 
    <ul class="byline-list"> 
    <li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li> 
    </ul> 
</body> 
</html>

Muestra los bylines como los tengo encima.

Al final, también tuve que deshacerme de cualquier espacio en blanco entre los elementos li, para evitar una molestia: la propiedad de bloque en línea de lo contrario dejaría un espacio antes de cada coma.Probablemente haya un truco decente alternativo, pero ese no es el tema de esta pregunta, así que lo dejo para que alguien más responda.

violín aquí: http://jsfiddle.net/5REP2/

Fuente

2014-06-05 23:21:51

Un hilo de edad, sin embargo, alguien puede beneficiarse de esto:

li:not(:last-child)::after { content: ","; } 
li:last-child::after { content: "."; }

Esto debería funcionar en CSS3 y CSS2 [probado].

Fuente

2015-09-16 10:06:17 user5341733

Combinación de pseudo-elementos CSS, ": after" the ": last-child"

Respuesta

Cuestiones relacionadas