CSS tip: tu estás aquí

Publicado por Juan Pablo el 15.Mar.2005 | Comentarios (3)

Para quienes han dado una mirada al código fuente de este sitio y se han preguntado como es que se destaca el título de la sección en la cual estás, o dicho en otras palabras, ¿como hice el "tu estás aquí"? sin usar selectores de clase... aquí va el tip.

Suponiendo que tenemos el siguiente menú:

  <body>
  <div id="menu">
  <ul>
  <li><a href="#">item 1</a></li>
  <li><a href="#" class="actual">item 2</a></li>
  <li><a href="#">item 3</a></li>
  </ul>
  </div>
  </body>

Como se puede apreciar, el item 2 contiene una clase llamada actual, que obedecerá a la siguiente regla:

.actual {font-weight:bold}

Es correcto, no hay objeciones, funciona y lo practican muchos diseñadores. pero ¿que tal si hacemos algo más elegante y que nos libere de la necesidad de agregar clases a cualquiera de los itemes?.

Modifiquemos un poco nuestro XHTML:

  <body id="seccion-2" >
  <div id="menu">
  <ul>
  <li id="uno"><a href="#">item 1</a></li>
  <li id="dos"><a href="#">item 2</a></li>
  <li id="tres"><a href="#">item 3</a></li>
  </ul>
  </div>
  </body>

Hemos:

Agregado un selector ID al elemento body llamado seccion-2,
eliminado la clase aplicada al elemento a (l5) y
agregado un selector ID a cada uno de los itemes, es decir, al elemento li.

Y aquí viene lo bueno, para aplicarle cierto comportamiento al item 2, que en ese minuto se está viendo y con eso darle cierta diferencia con los otros, es decir "tú estás aquí", aplicamos la siguiente regla CSS:

body#seccion-1 #menu li#uno, body#seccion-2 #menu li#dos, body#seccion-3 #menu li#tres {font-weight:bold}

En consecuencia, de aquí en adelante sólo debemos modificar el selector ID del body de acuerdo a la sección en cuestión, es decir, <body id="seccion-1"> para el item 1, <body id="seccion-2"> para el item 2 y <body id="seccion-3"> para el item 3.

Enlace Permanente, Comentarios (3), Publicada en: CSS

Comentarios

1. konus

16.Mar.2005

Mmm.... interesante. Practicaré un poco...

:) gracias por el tip

2. hyoga

17.Mar.2005

Buen tip.

Lo que se puede hacer con CSS ;)

3. Rodrigo

19.Mar.2005

Che ... no es por nada no ... pero me parece más compleja tu solución que usar un simple class.

Igual, siempre que puedo evito usar clases (porque me parece que no hacen al codigo semantico, ni van a los fines), así que tu tipo me vine al pelo ...

Buen tip, complicadillo, pero lindo :D

El poder del weblog

Validador XHTML para Firefox