2011/04/07

Cómo definir un selector CSS que requiera dos clases


El problema que tenía involucraba bloques similares a:

proyectos-vista_1
<div class="view view-proyectos view-display-id-page_1">
  ...
</div>

proyectos-vista_2
<div class="view view-proyectos view-display-id-page_2">
  ...
</div>

noticias-vista_1
<div class="view view-noticias view-display-id-page_1">
  ...
</div>

noticias-vista_2
<div class="view view-noticias view-display-id-page_2">
  ...
</div>

Necesitaba aplicar un estilo únicamente al bloque proyectos-vista_1. Podría ser más fácil si éste tuviera un id, pero no lo tenía (así lo construye Drupal, en este caso).

La solución la encontré en este artículo. Consiste en usar un selector como:

.view-proyectos.view-display-id-page_1 {
  ...
}

Qué sencillo. No me lo imaginaba :-) Ojalá te sirva de ayuda tambien.

Referencia
Defining A CSS Selector That Requires A Multi-Class Union

1 comentario: