JMiur [E]

Una de las características interesantes del CSS es la posibilidad de establecer reglas con selectores especiales. Un selector es la primera parte de una regla, lo que indica en donde será aplicada a a qué tipo de etiquetas afectará. Por ejemplo, si quisiera que todas las etiquetas p se mostraran de color rojo, el selector es p:
p {color:red;}
y si quisiera que sólo las etiquetas p de la clase ejemplo fueran rojas, el selector sería p.ejemplo:
p.ejemplo {color:red;}
y así podría seguir armando reglas haciendo que ciertas propiedades sólo se apliquen a algo muy específico.

Un tipo de selector especial es el llamado child selector (selector de hijos) y para entender cómo funciona, hay que entender la parentela de las etiquetas. Dada una etiqueta, esta se considera la etiqueta "padre" de aquellas que están dentro; así, en este ejemplo, el div es la etiqueta padre y las etiquetas p y span son sus hijas:
<div>
  <p> algo</p>
  <p> algo </p>
  <span> algo </span>
</div>
En CSS, esa relación de parentezco se expresa con el carácter > y podría hacer que sean rojas de este modo:
div > p {color:red;}
claro que también podría hacerlo así ya que el ejemplo es simple:
div p {color:red;}
La utilidad de los child selector sólo se ve cuando las estructuras son más complejas:
<div id="demochild">
  <h3> titulo 1 </h3>
  <p> un texto cualquiera </p>
  <h3> titulo 2 </h3>
  <p> un texto cualquiera </p>
  <div>
    <h3> titulo 4 </h3>
    <p> un texto cualquiera </p>
    <h3> titulo 5 </h3>
    <p> un texto cualquiera </p>
  </div>
</div>
Lo que tenemos es un DIV que tiene etiquetas H3 y cualquier contenido y adentro, otro DIV que también tiene etiquetas H3 y cualquier contenido y de este modo, hago que todos los títulos H3 se vean amarillos:.
#demochild h3 {
  color: gold;
}

Pellentesque habitant morbi tristique.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Curabitur vel condimentum velit.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Donec placerat lorem sed enim auctor.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Pellentesque habitant morbi tristique.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Curabitur vel condimentum velit.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Donec placerat lorem sed enim auctor.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.


Pero, lo que quiero es que los primeros sean amarillos pero los segundos, los que estan en ese otro DIV interno, se vean blancos; entonces, las reglas serían algo así:
#demochild h3 {
    color: white;
}
#demochild > h3 {
  color: gold;
}
Con eso, le estamos diciendo que sólo los títulos que sean hijos del DIV cuyo ID es demochild sean amarillos y el resto de los títulos sea blanco; como los segundos no son descendientes directos porque estan en otro DIV, el resultado es esto:

Pellentesque habitant morbi tristique.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Curabitur vel condimentum velit.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Donec placerat lorem sed enim auctor.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Pellentesque habitant morbi tristique.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Curabitur vel condimentum veh3t.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Donec placerat lorem sed enim auctor.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.


¿Y si quiero lo inverso? bastaría indicarlo así:
#demochild h3 {
  color: white;
}
#demochild > div h3 {
    color: gold;
}

Pellentesque habitant morbi tristique.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Curabitur vel condimentum velit.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Donec placerat lorem sed enim auctor.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Pellentesque habitant morbi tristique.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Curabitur vel condimentum velit.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

Donec placerat lorem sed enim auctor.

Curabitur tristique ligula ac quam elementum aliquet aliquam diam dictum. Vestibulum interdum libero quis enim ornare egestas.

3 comentarios:

Gem@  

Muy interesante, algo había visto en algunas plantillas pero sinceramente desconocía toda esta explicación.

JMiur  

Todo puede servir ... alguna vez :

Responder
Jose  

Gracias, mil gracias! Eres sencillamente extraordinaria!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR