Dar estilos distintos según el número de elementos sólo con CSS

Una cosa con la que nos enfrentamos a veces es con la necesidad de dar estilos distintos dependiendo de cuantos elementos haya en un grupo. Un ejemplo sería dar un color a unos párrafos cuando sólo hay entre 1 y 3 párrafos, y otro color cuando el número de párrafos es mayor que 3. Lo que queremos no es dar un color distinto a los 3 primeros párrafos, sino que todos los párrafos tomen un color u otro dependiendo del número total.

Para esto existen varias soluciones:

• Podemos contar los párrafos en el lenguaje de programación de servidor (JSP, PHP) y dar una clase u otra a los párrafos (o al elemento padre) dependiendo del número total de elementos. Esto es lo más usual, pero es verdad que esto nos obliga a modificar la programación cuando el criterio cambia (se pasa de 3 a 4, por ejemplo) además de que obliga a meter clases adicionales.

<div class="<?php print $parrafos > 3 ? "muchos" : "pocos"; ?>">
// Inserción de los párrafos
</div>

• Otra solución es utilizar javascript (jquery, por ejemplo) para insertar las mismas clases dinámicamente, como en este ejemplo (aquí el ejemplo funcionando en Codepen)

$('div').each(function() {
  var hijos=$(this).children('p');
  if (hijos.length > 3) {
    $(this).addClass('muchos');
  } else {
    $(this).addClass('pocos');
  }
});

Ahora, gracias a este artículo en A List Apart podemos ver un método puramente CSS. Básicamente, consiste en utilizar el siguiente selector:

bc..(language-css).. div p:nth-last-child(n+4):first-child,
div p:nth-last-child(n+4):first-child ~ p { background-color: #faa;
}

En el ejemplo anterior se daría ese color para 4 elementos o más. Puedes verlo en funcionamiento en este CodePen donde he puesto cómo se seleccionarían N, más de N o menos de N.

See the Pen dPjWgE by Juanjo Navarro (@juanjonavarro) on CodePen.

El artículo en A List Apart está además muy bien explicado, utilizando cada vez selectores más complejos hasta llegar a esta solución y tiene algunos selectores relacionados interesantes.