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

Muy a menudo, es natural tener que especificar un estilo CSS para todos los elementos excepto el primero (o el último). Por ejemplo, al aplicar estilo a los párrafos, desea agregar un margen inferior a todos los elementos excepto el último (o, de manera similar, un margen superior a todos los elementos excepto el primero).

Hay alguna manera de hacer eso que es :

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

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

Author: BoltClock, 2012-04-05
Source

4 answers

Para todos los elementos p excepto el primer hijo, use cualquiera de estos (el segundo es mejor soportado): 

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

Para todos los elementos p excepto el último hijo: 

p:not(:last-child)

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

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

Como de costumbre, :not() y :last-child de CSS3 no son compatibles hasta IE9+ y versiones relativamente nuevas de otros navegadores. Usted no va a llegar muy lejos en términos de soporte del navegador (IE8 y mayores) a menos que agregue clases a sus primeros y últimos hijos, usando JavaScript o de otro modo.

Recuerde que los márgenes verticales colapsan entre los párrafos en flujo y sus antecesores, por lo que 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 violín para ilustrar.

 79
Author: BoltClock,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-12 20:38:20

Bueno, podrías hacer: 

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

Pero solo los navegadores más recientes soportan la clase psuedo :not.

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

 3
Author: Niet the Dark Absol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-05 17:42:38

Si el soporte IE7-8 no es necesario, puede usar el :not() Selector CSS .

Pero si necesita soportar IE7+, que aún puede ser el caso, hay un pequeño truco que puede usar y generalmente lo lleva bastante lejos. Un hecho menos conocido es que el selector psuedo :first-child realmente funciona en IE7+ (aunque no :last-child) como lo son algunos otros selectores css y esto hace que cosas como agregar márgenes verticales en un diseño flotado horizontalmente sea posible.

Imagine esto html: 

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

Y esto como algunos 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 están horizontalmente uno al lado del otro, y ahora queremos agregar un margen entre todos los elementos 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 generalmente cubre el 95% de los casos en los que quiero algo único, luego el resto de los selectores 'olvidados' cubren otro porcentaje, después de eso necesita agregar algunas clases que generalmente no son un cuello de botella de todos modos en el backend de la página.

 3
Author: sg3s,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-04-12 20:38:03

Sugeriría usar first-of-type: 

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

Soporte del navegador (caniuse)

 2
Author: David Morales,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-27 10:15:40