¿Hay alguna manera de especificar una abreviatura de CSS para "todos los elementos excepto el primero/último"?

Question

Muy a menudo, es natural que necesite especificar un estilo CSS para todos los elementos excepto el primero (o el último). Por ejemplo, al diseñar párrafos, desea agregar un margen inferior a cada elemento, excepto el último (o similarmente, un margen superior para cada elemento excepto el primero).

¿Hay alguna manera de hacer que eso es:

• más concisa que define p {...} y luego p:first-child {...}?
• más sencillo e intuitivo que p:nth-child(-n+1)?

Si no lo hay, ¿conoce algún intento de agregarlo?

Answer 1

Para todos p elementos excepto el primer hijo, usar uno de estos (el segundo es soportado mejor):

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

Para todos p elementos excepto el último hijo:

p:not(:last-child) 

Para todos los elementos p excepto el primero y el último elemento secundario:

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

Como de costumbre, no se admiten :not() y :last-child de CSS3 hasta IE9 + y versiones relativamente nuevas de otros navegadores. No llegará muy lejos en términos de compatibilidad con navegadores (IE8 y anteriores) a menos que agregue clases a su primer y último hijo, usando JavaScript u otros.

Recuerde que vertical margins collapse between in-flow paragraphs and their ancestor(s), entonces, a menos que desee poner a cero los márgenes del elemento contenedor para estos párrafos también, no debería necesitar poner a cero los márgenes del primer y último elemento p específicamente. Aquí hay un fiddle para ilustrar.

Answer 2

Bueno, se podría hacer:

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

Pero sólo los navegadores más recientes apoyar la pseudo-clase :not.

Aparte de eso, no. Su mejor opción es especificar un estilo para todos y luego anularlo para el primero/último.

Answer 3

Si no es necesaria la compatibilidad con IE7-8, puede utilizar el :not() CSS selector.

Pero si necesita soportar IE7 +, que aún puede ser el caso, hay un pequeño truco que puede usar y que generalmente lo lleva bastante lejos. Un hecho menos conocido es que el selector de psuedo :first-child en realidad funciona en IE7 + (no en :last-child) como en some other css selectors y esto hace que sea posible agregar márgenes verticales en un diseño de flotación horizontal.

Imagínese esto html:

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

Y esto como un poco de CSS:

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

Así que ahora todos los elementos de la lista son horizontalmente uno junto al otro, y ahora queremos añadir un margen en el medio todos los artículos, pero no en el lado derecho o izquierdo, podemos hacer esto en 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; } 

esto suele cubrir s El 95% de los casos en los que deseo algo único, luego el resto de 'forgotten' selectors cover another few percent, después de eso debe agregar algunas clases que generalmente no son un cuello de botella de todos modos en el back-end de la página.

Answer 4

sugeriría a utilizar first-of-type:

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

Browser support (caniuse)