Muchas veces cuando utilizamos HTML y CSS, las cosas son sencillas, ya que para empezar, CSS no es más que una sintaxis para darle estilos a una página con HTML. Un problema que no siempre surge, pero si en ciertas ocasiones, es el querer darle estilos a un elemento que tenga varias clases, y no solo una.
El ejemplo más común se podría dar con un CMS o CMF como WordPress y Drupal, que agregan ciertas clases en la etiqueta body.
Ejemplo en Drupal:
<body class="not-logged-in page-admin">
Como Drupal nos muestra dos clases importantes en un mismo elemento, no tenemos muchas opciones; como para realizar la tarea de darle estilos a una página de administración, justo cuando el usuario se encuentra desconectado.
Tal es el caso de visitar la siguiente ruta mientras estamos desconectados:
https://example.com/drupal/admin
Ahora que ya está explicado, o al menos tienen una idea de en qué nos podría servir, en CSS3 podemos hacer lo siguiente:
body[class*="not-logged-in"][class*="page-admin"] #page-title {
font-size: 2em;
}
De esta manera solo se le aplican los estilos al elemento #page-title que se encuentra en una página que forzosamente debe tener las clases not-logged-in y page-admin, para que funcione correctamente.
Otra forma de hacerlo, y que creo que funciona en navegadores más antiguos, es hacer lo siguiente:
.not-logged-in.page-admin #page-title {
font-size: 2em;
}
Así se cumpliría con las condiciones correctamente, aunque aún no lo he probado, pero se supone que el efecto es parecido, y no importa el orden en que se coloquen las clases (Por si les quedo la duda).
Básicamente es todo lo que se tiene que hacer, y no hay mejor forma de aprender, que a prueba y error.
