A decir verdad, llevo ya bastante tiempo trabajando con tecnologias web (veanse PHP, HTML, JS, CSS, etc…) y hoy he descubierto algo nuevo.

Es una chorrada, lo reconozco, pero no me habia parado a pensarlo tampoco.

Si habeis hecho alguna cosa con CSS sabeis que están los tags, los identificadores y las clases, a la hora de definir un estilo. También sabreis que todos ellos pueden combinarse, y que luego cada navegador interpreta a su manera los estilos, y a veces es un infierno.

Esto no va sobre el infierno del CSS en los distintos navegadores, sino sobre como según se declaren las clases, se puede conseguir que cuando dos clases coinciden en el mismo bloque, ambas produzcan un nuevo resultado.

Vale, es una chorrada. Yo llegaba hasta lo de combinar tags y clases o ids y clases, pero no habia caido en la cuenta de que dos clases también se pueden combinar

Para el que no sepa de que estoy hablando, o quiera entender lo que digo, aquí va un ejemplo:

<style type="text/css">
<b>.a1, .a2</b> { color: red; }
<b>.b</b> { border: 1px solid black; }
<b>.a1 .b</b> { background: #ccf; }
<b>.a2.b</b>  { background: #ccf; }
</style>
 
<div class="a1">Bloque creado con <strong>class="a1"</strong></div>
<div class="b">Bloque creado con <strong>class="b"</strong></div>
<div class="a1 b">Bloque creado con <strong>class="a1 b"</strong></div>
<div class="a2 b">Bloque creado con <strong>class="a2 b"</strong></div>

He aquí el resultado

Y para los lectores del blog que usen RSS:

Como se puede ver, a1 y a2 han sido declaradas exactamente igual, sin embargo se declaran de forma distinta “.a1 .b” (notese el espacio) y “.a2.b” (aqui no hay espacio). Básicamente la primera declaración está diciendo como cambiar el diseño de un objeto de clase b cuyo ancestro sea a1, mientras que la segunda dice como cambiar el estilo de un objeto cuyas clases sean a la vez a2 y b.

Pues nada más, como diría carme: espero que lo hagais, y a ver si os gusta

.

Nota: Para el que después de leer esto esté pensando “ostias, es cojonudo! tampoco lo sabia”, que sepa que lo he probado con varios navegadores (IE6, IE7, FF2, FF3, Opera y Safari 3), y funciona en todos menos en…. efectivamente!! menos en IE6 (la verdad es que debo reconocer que me ha sorprendido que funcionara en IE7).

Trackback URL