C'è un modo per specificare una scorciatoia CSS per "tutti gli elementi tranne il primo/ultimo"?

Question

Molto spesso, è naturale dover specificare uno stile CSS per tutti gli elementi tranne il primo (o l'ultimo). Ad esempio, quando si disegnano i paragrafi, si desidera aggiungere un margine inferiore a ogni elemento tranne l'ultimo (o allo stesso modo, un margine superiore a ogni elemento tranne il primo).

Esiste un modo per farlo che è:

• più conciso che definire p {...} e poi p:first-child {...}?
• più semplice e intuitivo di p:nth-child(-n+1)?

Se non c'è, sai di qualsiasi tentativo di aggiungerlo?

Answer 1

Per tutti p elementi tranne il primo figlio, utilizzare uno di questi (il secondo è meglio supportato):

p:not(:first-child) 
p:first-child ~ p 

Per tutti p elementi tranne l'ultimo bambino:

p:not(:last-child) 

Per tutti gli elementi p tranne il primo e l'ultimo figlio:

p:not(:first-child):not(:last-child) 

Come al solito, i CSS3 :not() e :last-child non sono supportati fino a IE9 + e versioni relativamente nuove di altri browser. Non raggiungerai molto lontano in termini di supporto del browser (IE8 e versioni precedenti) a meno che tu non aggiunga classi al tuo primo e ultimo figlio, utilizzando JavaScript o altro.

Ricordare che vertical margins collapse between in-flow paragraphs and their ancestor(s), quindi, a meno che non si desideri azzerare i margini dell'elemento contenitore per questi paragrafi, non è necessario azzerare in modo specifico i margini del primo e dell'ultimo elemento p. Ecco un fiddle da illustrare.

Answer 2

Beh, si potrebbe fare:

p:not(:first-child) {...} 

Ma solo i browser più recenti sostenere il :not pseudo-classe.

Diverso da quello, n. L'opzione migliore è specificare uno stile per tutti e quindi sostituirlo per il primo/ultimo.

Answer 3

Se il supporto IE7-8 non è necessario, è possibile utilizzare :not() CSS selector.

Ma se hai bisogno di supportare IE7 +, che potrebbe essere ancora il caso, c'è un piccolo trucco che puoi usare e di solito ti allontana abbastanza. Un fatto meno noto è che il selettore psuedo :first-child funziona in realtà in IE7 + (non :last-child) come lo è some other css selectors e questo rende possibile l'aggiunta di margini verticali in un layout fluttuato orizzontalmente.

Immaginate questo html:

<ul> 
    <li>Item #1</li> 
    <li>Item #2</li> 
    <li>Item #3</li> 
    <li>Item #4</li> 
</ul> 

E questo come alcuni CSS:

/* General reset */ 
ul, li { list-type: none; margin: 0; padding: 0; } 
/* Make horizontal */ 
ul > li { float: left; } 

Così ora tutti gli elementi della lista sono orizzontalmente uno accanto all'altro, e ora vogliamo aggiungere un margine nel TRA tutte le voci, ma non sul lato destro o sinistro, siamo in grado di fare questo in css:

/* General reset */ 
ul, li { list-type: none; margin: 0; padding: 0; } 
/* Make horizontal */ 
ul > li { float: left; margin-left: 10px; } 
ul > li:first-child { margin-left: 0; } 

questo di solito copre s il 95% dei casi in cui voglio qualcosa di unico, quindi il resto dello 'forgotten' selectors cover another few percent, dopo di che è necessario aggiungere alcune classi che di solito non sono un collo di bottiglia in ogni caso nel back-end della pagina.

Answer 4

Vorrei suggerire di utilizzare first-of-type:

p:not(:first-of-type) { ... } 

Browser support (caniuse)