Tip Precoz 1: atributos contextuales

20/Jun/2008 156

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. provigildosage [#]

    https://modafilmdmodafinil.com/ modafinil schedule

  2. bactrim for sinus infection [#]

    sulfamethoxazole generic name is bactrim a strong antibiotic

  3. stromectolforte.com [#]

    ivermectin tablette http://stromectolforte.com/ ivermectin paste ivermectin for humans ivermectino

  4. prednisolonewarnings [#]

    prednisolone warnings buy prednisone online

  5. modafinilforsale [#]

    https://modvigilmodafinil.com/ where to buy modafinil reddit

  6. generieke stromectol [#]

    stromectol https://stromectolforte.com/ ivermectin coronavirus stromectol in canada

CSSLab