tecnicalia.com

Un tip precoz es un método tan corto y rápido, que casi que no es un artículo en sí. Los artículos son más bien extensos, donde explico paso-por-paso alguna técnica propuesta. En esta ocasión es casi como un twitter-artículo. La presente técnica la conozco pero no sé de dónde la saqué, ya que por más que busco en la web no encuentro documentación alguna al respecto. No sé ni cómo se llama, así que la incluí dentro de los selectores contextuales, ya que se comporta respetando los atributos adyacentes.

Veamos la siguiente situación: tengo una etiqueta con una class="destacado" donde lo que hace es poner rojo el color del texto:

.destacado {
     color: red;
}

<blockquote class="destacado">
     Lorem ipsum dolor sit amet.
</blockquote>

Esa class la uso en varias otras etiquetas, pero hay una que por X motivo tiene un id="unico", y necesito que esa etiqueta tenga un tamaño de fuente mayor. Lo normal sería pensar en crear otra class que tenga color rojo y font-size deseado. Otra solución es crear una class con sólo el nuevo font-size y aplicarlo junto a la class="destacado" ya existente. Pero otra solución es utilizar el id="unico" junto a la class="destacado" ya declarados para ello, de la siguiente manera:

#unico.destacado {
     font-size: 3em;
}

<blockquote id="unico" class="destacado">
     Amet sit dolor ipsum lorem.
</blockquote>

Como .destacado ya está declarado para poner color rojo al texto, sólo basta agregar el nuevo tamaño de texto.

Ahora, hay otra situación. Qué pasa si, por esas cosas de la vida, tengo dos classes en una misma etiqueta:

<blockquote class="destacado menor">
     Bla ble bli blo blu.
</blockquote>

Y quiero que el texto sea rojo (ya declarado en .destacado) pero con un font-size menor. De la misma forma anterior:

.destacado.menor {
     font-size: 0.5em;
}

Y… si por esos accidentes raros de la vida profesional te tocara un elemento con 1 id y 2 classes:

<blockquote id="unico" class="destacado mayor">
     Cla cle cli clo clu.
</blockquote>

Y quieres también darle estilo pero sólo cuando esté dado esa situación… supones bien, de la siguiente manera:

#unico.destacado.mayor {
     font-size: 6em;
}

Ver todos los ejemplos juntos

Me da gusto esta vez de anunciar que esto funciona en IE6… por lo tanto, los otros browsers buenos también lo aceptan.

             

Articulos relacionados:
Communipare, crea tus propias comparativas en la web
Tip Precoz 2: combinando @media
10 second solution libera los dispositivos GSM
Rayos-X contra no-estándares
Nokia WRT: Widgets personalizados y contextuales en S60

Permalink Via CSSLab CSS

Este articulo ha sido archivado el Viernes, Junio 20th, 2008 @ 19:02 y est?? relacionado con CSS. Puedes seguir los comentarios a trav??s del feed RSS 2.0. Comentarios y Ping est??n desactivados