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

• Selectores básicos
  • Universal
  • Etiqueta
  • Clase
  • ID
  • Descendente
  • Combinado
• Selectores avanzados
  • Hijos
  • Adyacentes

¿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

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

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

• Google
• Facebook
• Twitter