Selectores CSS. Básicos | Oloblogger CSS es un lenguaje que permite programar la parte estética de un sitio web. Para ello se sirve de lo que se denominan reglas, unos elementos...

4 de junio de 2013

Selectores CSS. Básicos

CSS es un lenguaje que permite programar la parte estética de un sitio web. Para ello se sirve de lo que se denominan reglas, unos elementos que a su vez se componen de un selector y una declaración.

El selector indica a qué hay que aplicarle la regla y la declaración especifica qué es lo que hay que hacerle.

Dentro de la declaración nos encontramos las propiedades y sus valores, que son los que al final marcarán el estilo de nuestro sitio: colores, tipografías, márgenes, etc.

Con un conocimiento básico de inglés pienso que cualquiera puede deducir qué hace cada una de las propiedades que se pueden usar, pero de todas formas aquí tenéis la utilidad de las más comunes.


Sin embargo con los selectores no basta con saber idiomas y creo que conociéndolos bien nos podríamos ahorrar en muchas ocasiones el tener que usar otros lenguajes -como JavaScript- que aumentan el peso de la página a veces innecesariamente. Así que hoy empezamos con los básicos y en otra ocasión vemos otros más avanzados.

Si quieres ir un paso atrás y ver dónde se debe poner este tipo de código, no olvides pasar por esta otra entrada: CSS básico. Ejemplo con imágenes redondas.

Y que me disculpen los puristas si le pego alguna patada a la terminología del estándar.


Selectores básicos CSS


Los selectores son como una especie de filtro. Con ellos podemos seleccionar subconjuntos de elementos de entre todos los existentes en una página web y así aplicarles idénticas propiedades para que finalmente tengan el mismo estilo.

La principal ventaja de usar CSS es que con una sola regla podemos dar un estilo determinado a todos esos elementos homogéneos de una sola vez, cosa especialmente útil cuando queremos modificar una parte importante de nuestro diseño.


Imaginad por ejemplo que vamos redactando entradas en un blog insertando en ellas código para forzar determinado color para la tipografía. El día que queramos cambiar dicho color tendremos que editar todas y cada una de las entradas para cambiarlo. Sin embargo, si asignamos ese color mediante un selector CSS, cuando queramos cambiarlo en todas las entradas sólo tendremos que alterar el valor de la propiedad en la regla correspondiente.

En Blogger y plantillas estándar, esto se haría aplicando propiedades a .post-body, que es el selector bajo el que está el contenido de las entradas propiamente dichas. Las reglas que tenga ese selector automáticamente afectarán a la estética de todas las entradas. Si queremos todo el texto centrado, pues allí incluiremos un text-align: center; Si queremos que todo el texto de la entrada sea verde, pues pondremos un color: green;.

Si el día de mañana queremos cambiar el color por otro, sólo habría que cambiar el valor green por el nuevo y TODAS nuestras entradas cambiarían de color.


Por explicarlo de otro modo, un selector viene a ser como una marca que ponemos en ciertos contenidos HTML. Esa marca por si sola no hará nada, pero cuando además se pone en CSS con unas reglas, el navegador es capaz de relacionar uno y otro lenguaje y aplica el estilo al contenido marcado.

Es más fácil verlo y hacerlo que explicarlo, pero esta es la magia de CSS (Cascading Style Sheets, Hojas de estilo en cascada). Pasamos a verlo y vuestra parte es hacerlo.


Selector universal


Sirve para seleccionar todos los elementos de la página. Se representa mediante un asterisco.

(Aplicar a TODOS los elementos de la página un margen cero)
* { margin: 0; }

Un ejemplo simple. Añadid a vuestra hoja de estilo esto y veréis que gracia. Bueno, en unas plantillas más que en otras.

* {
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}


Lo que hace esa regla es aplicar a TODOS los elementos de vuestra página una transición. Cualquier elemento que tenga en ella un cambio de tamaño, un cambio de posición, de color de fondo, etc., se hará poco a poco y no de golpe, a partir de que pongáis esa regla. Ya digo que según las plantillas será más o menos visible, pero en los enlaces y otros elementos en los que tengáis programado algún hover con algún efecto, lo veréis más claro.

Para este post he añadido esa regla. Al margen de que ya la llevan las etiquetas desde siempre, ahora se ha incorporado a los botones sociales entre sidebar y entradas. Probad también a cambiar el tamaño de la ventana y fijaros como a partir del ancho en el que desaparece la barra lateral izquierda, el resto de bloques se adaptan al tamaño disponible poco a poco, como a cámara lenta.

Este selector funcionará para todo aquello que no tenga su propia regla con distinta propiedad. Si usáis el selector universal con un background: red; por ejemplo, veréis que algunas cosas no cambian. Esto es porque tienen un fondo propio asignado mediante una regla. Sin miedo, que con Vista Previa se puede ver y no grabar.


Pues el resto de selectores funcionan igual, pero permiten seleccionar (valga la redundancia) elementos más concretos... según necesitemos. Vamos con el resto.


Selector de etiqueta


Selecciona todos los elementos marcados con determinada etiqueta HTML.

(Aplicar a TODOS los div un fondo rojo y un borde sólido de 2px y color negro)
div { background: red; border: 2px solid black;}

Y al igual que en el ejemplo hemos usado un div, podremos aplicar reglas a span, p, input, h1, etc.


Selector de clase


Sirve para dar estilo sólo a determinados elementos marcados con el atributo class y la clase definida.

(Aplicar a todos los elementos con una clase verde una fuente de color verde)
.verde { color: green; }

Este tipo de selectores son fundamentales para dar estilo a partes concretas del sitio web y para ello utiliza nombres arbitrarios que nosotros mismos generamos en lugar de etiquetas HTML.

Como nombre de clase podemos utilizar prácticamente lo que queramos (olvidémonos de los caracteres especiales), aunque conviene que sea nemotécnico para recordar que existe y lo que hace cuando para lo vayamos a necesitar. Para añadirlo a un elemento se utiliza el atributo class.

<div class="green">AQUÍ EL CONTENIDO DEL DIV</div>


Selector de ID

Iguales que los anteriores pero para elementos marcados con el atributo id. Este se utiliza para marcar un elemento único.

(Aplicar al elemento slider un color de fondo azul)
#slider { background: blue; }

Las clases y los identificadores son como los nombres comunes y los propios. Una clase se puede reutilizar para diversos elementos pero uno con id tiene que ser único (class="montes", id="Everest"). No puede haber más que un solo elemento con una determinada id en la misma página, de lo contrario el intérprete del navegador dará resultados a priori imprevisibles. No es que se vaya a auto-destruir el ordenador ni nada de eso, pero seguramente no hará lo que nosotros necesitamos.

Nótese que la diferencia al declararlos es que los de clase llevan un punto y los de id llevan un símbolo de sostenido (#).

Para añadirlo a un elemento se hace también igual que antes pero usando el atributo id:

<div id="slider">AQUÍ EL CONTENIDO DEL DIV</div>


Selector descendente


Las declaraciones se aplicarán sólo a los elementos de la etiqueta especificada que estén dentro de otra etiqueta concreta. Con este tipo de selectores restringimos el alcance de los simples, que evidentemente son más genéricos.

(Aplicar a todos los párrafos que se encuentren dentro de un span un relleno igual a 10px)
span p { padding: 10px; }

En este caso veis que hemos utilizado dos selectores (span y p) pero se pueden seguir añadiendo los que sean necesarios según el anidamiento de cajas que hayamos programado. El estilo siempre se aplicará al último. En el ejemplo a los párrafos (p).

(Aplicar a todos los elementos con clase textorojo que estén dentro de otro con id #slider, un color de fuente rojo)
#slider .textorojo { color: red; }

Se pueden combinar selectores de todos los tipos, de etiqueta, de clase y de id.



Selectores combinados


No sé si realmente están clasificados así, pero con el nombre de combinados me refiero a otros que utilizan todos los anteriores mezclados y que no son necesariamente descendentes.

(Aplicar a todos los párrafos con clase amplio que estén dentro de otro de un div con clase verde, un margen de 40px)
div.verde p.amplio { margin: 40px; }

Como veis en el ejemplo, el párrafo y el div son descendentes entre sí, pero tanto el div con respecto a su clase y el párrafo con respecto a la suya no lo son. En este último caso no se deja un espacio en blanco entre ambos selectores. Correspondería a esta estructura HTML:

<div class="verde">
<p class="amplio">TEXTO QUE SE VERÁ AFECTADO POR EL SELECTOR</p>
<p>TEXTO QUE NO SE VERÁ AFECTADO</p>
OTRO TEXTO QUE NO SE VERÁ AFECTADO
</div>


Y a medida que vamos complicando esto obtenemos selectores cada vez más potentes para poder hacer operaciones de microcirugía en nuestra plantilla y así lograr alcanzar el elemento que queremos modificar y no otro.


En próximas entradas veremos otro tipo de selectores más avanzados y una manera sencilla de usar jQuery para saltar la limitación CSS de sólo poder ir en sentido descendente.

Sí, es JavaScript, pero no encontré otra manera y por eso dije "saltar" y además nos servirá a los de Blogger para poder personalizar los comentarios del autor del blog dónde no llega el CSS.

Lo que sabemos sobre selectores CSS

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

21 comentarios :

  1. Fantástico artículo. Muy necesitado por todos los que intentamos entender de qué va esto.
    Muchísimas gracias.
    Me preguntaba, por curiosidad, si se puede añadir tiempos menores a 1 segundo, por ejemplo en el trocito de código que das para implementar transiciones en todos los elementos, así que le he puesto 0.5 y veo que efectivamente funciona sin problemas, por si a alguien le interesa.

    ResponderEliminar
    Respuestas
    1. Ya lo has comprobado, pero ahí puedes poner el valor temporal que quieras, incluso en fracciones de segundo como hiciste.

      Eliminar
  2. Que buen articulo Oloman. Asi intentare entender un poquito el codigo de mi plantilla.

    Saludos

    ResponderEliminar
  3. Muy interesante!!Gracias!!! Viendo todas estas explicaciones..Voy a tener que crear un blog de prueba para trastear de verdad y sin miedo de cargarme algo en mi blog personal :)

    ResponderEliminar
  4. Muy bueno. Gracias por enseñarnos!

    ResponderEliminar
  5. Perdón por poner un comentario que no va con el tema de la entrada pero intente escribirte en la sección de contacto pero el servidor ya no deja enviarte mas consultas.

    Me gustaría poner esta plantilla (https://www.box.com/s/c04fd1ab1e6b6d35575f) en uno de mis blogs pero no consigo encontrar el código para quitar el 'Leer mas' y que se vean las entradas completas.
    Ojala pudieras ayudarme.

    Saludos,
    Bloom

    ResponderEliminar
    Respuestas
    1. Pues podría ser el script que hay a partir de la línea 2276, ya que está comprimido y no se puede "leer" lo que hay en él, pero no lo sé seguro. Me vendría mejor verla instalada por lo que si tú no la tienes puesta todavía, al menos pásame la dirección de dónde la descargaste o de su demo.

      Eliminar
    2. Aquí tienes la pagina de la plantilla
      http://www.soratemplates.com/2012/07/inspiration-blogger-template.html

      gracias!

      Eliminar
    3. Las líneas 819 a 821 son definitivamente las que realizan el recorte de texto, pero no sé si llevará más ajustes CSS o si con quitarlas tendrás suficiente.

      Eliminar
    4. Quitando esas lineas sin mas, se queda todo igual.
      Gracias de todas formas por tu tiempo!

      Eliminar
    5. ¿Dónde estás haciendo las pruebas?

      Eliminar
    6. En este blog de pruebas
      http://pruebas202.blogspot.com.es/

      Eliminar
    7. Elimina también de la 1397 a la 1400 (ambas inclusive) y justo en su lugar pon un simple <data:post.body/>

      Eliminar
    8. Hice lo que me dijiste y me salio este mensaje

      No se ha podido cargar la vista preliminar de la plantilla: Error al analizar XML, línea 1399, columna 21: The element type "b:widget" must be terminated by the matching end-tag "".

      Eliminar
    9. Los números los tomé de la primera plantilla que me mandaste. En el comentario 5.

      Eliminar
    10. Ya quite y puse lo que me dijiste.
      Ahora se ven las entradas completas y al final el boton de 'Read more'.
      No se si solo seria quitar el botón ese o habría algo mas.

      Eliminar
    11. Si ya se ven las entradas completas ya tienes lo que querías. Efectivamente, ahora sólo te falta quitar el botón. Busca en el código la palabra "read more" y posiblemente encuentres el lugar fácilmente.

      Eliminar
    12. Y he conseguido quitar el botón "Read more" y ya me quedan las entradas como quería.
      Muchas gracias Oloman por tu paciencia!
      Me ayudaste mucho :-D

      Eliminar
  6. Hola, Oloman. ¿Podrías decirme cómo puedo reducir el margen izquierdo de mi blog? Gracias.

    ResponderEliminar
    Respuestas
    1. Podría si pudiera verlo, pero has puesto un mensaje de "En construcción" que no me permite ver nada :)

      Eliminar
  7. HOLA QUE BUENO, MUY INTERESANTE, SOY NUEVA EN TODO ESTO PERO ESTOY MUY MOTIVADA..GRACIAS

    ResponderEliminar