Tip Precoz 1: atributos contextuales

20/jun/2008 4

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.

Comentarios

  1. fearlex [#]

    Excelente tip, 😀

  2. byteheadx [#]

    que buen tip…. exelente.

  3. noth [#]

    Hola Jorge,

    No te hace falta buscar, no es ninguna técnica es el propio uso que se le pueden dar a las clases y ids, lo que sí es cierto es que muy poca gente lo usa, a lo igual que muchos atributos o elementos digamos olvidados.

    Supongo que sea por desconocimiento de algunos tutoriales poco avanzados.

    Hace poco he tenido que discutir que se podía poner dos clases juntas, class=”news active” jeje

    Pero está muy bien que lo menciones, para ver si todo el mundo empieza a usar el css correctamente y no solo para hacer dos cosas.

    Además de esta forma liberas mucho ruido al marcado, muy muy útil.

    Un saludo

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab