Si miramos en las especificaciones de CSS3, hay una sección en la que trata este tema. Lo llaman Processing of conditional group rules
.
Según el ejemplo que provee la especificación (traducción propia):
Por ejemplo, con este conjunto de reglas anidadas:
@media print { // rule (1)
/* hide navigation controls when printing */
#navigation { display: none }
@media (max-width: 12cm) { // rule (2)
/* keep notes in flow when printing to narrow pages */
.note { float: none }
}
}
la condición de la regla marcada (1) es verdadera para medios impresos, y la condición de la regla marcada (2) es verdadera cuando la anchura del área de impresión (que para medios impresos es el cuadro de página) es menor a o igual a 12cm. Por lo tanto, la regla ‘#navigation { display: none }’ se aplica siempre que esta hoja de estilos se aplique a medios impresos, y la regla ‘.note { float: none }’ es aplicada solo cuando la hoja de estilos es aplicada a medios impresos y la anchura del cuadro de la página es menor que o igual a 12 centímetros.
NOTA IMPORTANTE: Recuerda que el orden de los media queries es importante y, por lo tanto, tienen que ir de menos a más resctrictivo en orden descendente (el orden de CSS). Es decir, si tienes un max-width
de 600px como restricción y otro de 400px debería ir en primer lugar el de 600px.