Combinazione di pseudo-elementi CSS, ": after" the ": last-child"

102

Desidero rendere "grammaticalmente corretto" gli elenchi utilizzando i CSS. Questo è quello che ho finora:Combinazione di pseudo-elementi CSS, ": after" the ": last-child"

I tag <li> vengono visualizzati in orizzontale con una virgola dopo di essi.

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

li:after { content: ", "; }

che funziona, ma voglio che il "last-child" per avere un periodo, invece di una virgola. E, se possibile, mi piacerebbe mettere "e" anche prima dell'ultimo bambino. Le liste che sto stilando sono generate dinamicamente, quindi non posso dare una classe agli "ultimi figli". Non è possibile combinare gli pseudo-elementi, ma questo è fondamentalmente l'effetto che voglio ottenere.

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

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

Come faccio a fare questo lavoro?

fonte

2010-02-28 Derek

davvero non dovresti usare css per questo. –

Sono d'accordo con Funky Dude un po '. Sarebbe meglio farlo in HTML (o codebehind se è più che semplice HTML). Il CSS è per la formattazione :) – Zyphrax

+13

Io ... personalmente, tendo a sostenere che, in una lista, la formattazione è una cosa piacevole, non una necessità. In questo caso, l'utilizzo del CSS consente aggiunte o rimozioni più semplici dall'elenco, rispetto all'utilizzo della codifica html o lato server. Ma sono così stranamente, a volte, e onestamente ymmv, ecc ... =) –

145

Questo funziona :) (spero multi-browser, Firefox piace)

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>

fonte

2010-02-28 16:14:26 Zyphrax

Esempio live su http://jsfiddle.net/g3bz3/ – mskfisher

Un problema simile è il caso in cui si separano le voci di menu con caratteri di pipa. La stessa soluzione funziona. Tuttavia, l'attributo del contenuto finale deve essere impostato su {content: none;} per eliminare il carattere del pipe finale. – aridlehoover

Anche l'ordine è importante. 'li: last-child: after' funziona ma' li: after: last-child' no. –

È possibile combinare gli pseudo-elementi! Scusate ragazzi, l'ho capito subito dopo aver postato la domanda. Forse è meno utilizzato a causa di problemi di compatibilità.

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

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

Questo funziona a meraviglia. I CSS sono incredibili.

fonte

2010-02-28 16:14:43 Derek

Incredibile che puoi persino usarlo per cose che non sono nemmeno pensate per ... – Guffa

+10

Questo è un po 'un "pignolo d'angolo", ma "l'ultimo figlio" è in realtà una pseudo - ** classe **, mentre "prima" e "dopo" sono pseudo-elementi. La differenza è che una pseudo-classe è un vincolo aggiuntivo su un elemento esistente, mentre uno pseudo-elemento è effettivamente un elemento completamente nuovo nell'albero di presentazione che è stato generato in CSS piuttosto che in HTML. Puoi combinarli per questo motivo: l'ultimo child è un modificatore sul file 'li', e dopo aver selezionato tutti gli elementi' li' che sono gli ultimi figli, seleziona (e crea implicitamente) un nuovo elemento prima e dopo ciascuno. –

Mi piace per la voce di elenco nel menu < > elementi. Si consideri il seguente markup:

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

ho stile con il seguente CSS:

menu > li { 
    display: inline; 
} 

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

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

questo display:

Profile | Options | Logout

E questo è possibile a causa di ciò che Martin Atkins ha spiegato sul suo commento

fonte

2011-12-10 06:47:28

Sto utilizzando la stessa tecnica in una query multimediale che effettivamente si trasforma un elenco puntato in un elenco in linea su dispositivi più piccoli mentre risparmiano spazio.

Quindi il passaggio da:

elemento lista 1
elemento lista 2
voce dell'Elenco 3

lista 1 elemento; Lista Elemento 2; Elenco Articolo 3.

fonte

2013-12-04 02:45:14 user3064058

Sta cercando di farlo con i CSS. Il tuo metodo è HTML codificato. Questo metodo viene normalmente utilizzato per visualizzare la navigazione. – Sparatan117

solo per citare, in CSS 3

: dopo

deve essere utilizzato in questo modo

:: dopo

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

La notazione :: after è stata introdotta in CSS 3 per stabilire una discriminazione tra pseudo-classi e pseudo-elementi. I browser accettano anche la notazione: dopo aver introdotto nel CSS 2.

quindi dovrebbe essere:

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

fonte

2013-12-21 15:13:39

Ogni browser che supporta la doppia sintassi '::' CSS3 supporta anche solo la sintassi ':', ma IE 8 supporta solo i due punti, quindi per ora, si consiglia di utilizzare solo i due punti per il miglior supporto del browser . '::' è il formato più recente rientrato per distinguere lo pseudo contenuto da pseudo selettori. Se non hai bisogno del supporto per IE 8, sentiti libero di usare il doppio colon. Da questo [articolo] (https://css-tricks.com/almanac/selectors/a/after-and-before/) – JohnnyQ

@JohnnyQ grazie per quel tocco di informazioni –

IE 8 non è più un player in termini di browser standard. Non supportato da Microsoft e non supporta HTML5 o CSS3 (pseudo elementi, trasformazioni, ecc.) Ho fatto un sacco di lavoro sulla retrocompatibilità, fino a un anno fa, risalendo fino a IE6/IE7 (via Modernizr.) Abbiamo fatto molta strada e, se intendi che il tuo sito presenti la sua identità online a lungo termine, senza che diventi una soluzione miope, allora considera semplicemente le entrate che guadagneresti da qualcuno che utilizza IE8. Nada. Persino gli anziani, a 20 anni di distanza, usano tablet e laptop 2-in-1. –

Aggiunta un'altra risposta a questa domanda perché avevo bisogno esattamente ciò che è stato @derek chiedere e io Ho già ottenuto un po 'di più prima di vedere le risposte qui. In particolare, avevo bisogno di CSS che potesse anche l'account per il caso con esattamente due voci di elenco, in cui la virgola NON è desiderata. A titolo di esempio, alcuni bylines d'autore che volevo produrre sarà simile le seguenti:

un autore: By Adam Smith.

due autori: By Adam Smith and Jane Doe.

tre autori: By Adam Smith, Jane Doe, and Frank Underwood.

le soluzioni già dato qui lavoro per un autore e per 3 o più autori, ma trascuro di spiegare il caso di due autori — in cui lo stile "Oxford Comma" (anche k noto come stile "Harvard Comma" in alcune parti) non si applica - cioè, non dovrebbe esserci alcuna virgola prima della congiunzione.

Dopo un pomeriggio di bricolage, ero venuto con la seguente:

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

visualizza il nome dell'autore come io li ho sopra.

Alla fine, dovevo anche sbarazzarmi di qualsiasi spazio vuoto tra gli elementi li, per aggirare un fastidio: la proprietà del blocco in linea avrebbe altrimenti lasciato uno spazio prima di ogni virgola.Probabilmente c'è un attacco alternativo decente, ma non è l'argomento di questa domanda, quindi lascerò che sia qualcun altro a rispondere.

Fiddle qui: http://jsfiddle.net/5REP2/

fonte

2014-06-05 23:21:51

Una vecchia discussione, tuttavia qualcuno potrebbe trarre beneficio da questo:

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

Questo dovrebbe funzionare in CSS3 e [non testato] CSS2.

fonte

2015-09-16 10:06:17 user5341733

Combinazione di pseudo-elementi CSS, ": after" the ": last-child"

risposta

Problemi correlati