Selectores CSS. Que son y como usarlos

CSS es un lenguaje que nos permite describir el formato visual de un documento HTML.

Determina como se visualizarán todas y cada una de las etiquetas que conforman una página web.

Todos y cada uno de los aspectos visuales.

Esto significa que es necesario un sistema que nos permita identificar a todas y cada una de las etiquetas de una página web.

Las herramientas que nos permiten hacer este metier son los selectores.

• Selector universal
• Selector de etiqueta
• Selectores de clase y/o de clase múltiple
• Selectores de tipo identificador
• Selectores de atributo
• Selectores descendientes
• Selectores hijos

Selector universal

El selector universal sirve para indicar todas las etiquetas del documento web.

Se representa con un asterisco.

*{
//instrucciones CSS
}

Usualmente se utiliza para resetear los estilos de un documento web y asegurar el mismo visionado para todos los navegadores web.

Típicamente en muchas páginas web encontraréis la siguiente instrucción:

*{
margin:0;
padding:0;
}

Selector de etiqueta

El selector de etiqueta sirve afectar con unos estilos determinados todas las etiquetas de un tipo de un documento web.

Se suelen usar para aplicar una guía de estilos en un documento web.

Se escriben de la siguiente forma:

• Todos los párrafos: p{/*instrucciones CSS*/}
• Todas las secciones: section{/*instrucciones CSS*/}
• Todos los enlaces: a{/*instrucciones CSS*/}
• Todas las imagenes: img{/*instrucciones CSS*/}

Si varias instrucciones CSS aplican los mismos estilos entonces podemos llamar varios selectores en una misma línea.

Para hacerlo sólo debemos separarlos por comas. Por ejemplo:

Todos los títulos de un documento web.

h1,h2,h3,h4,h5,h6{/*Instrucciones CSS*/}

Selector de clase y/o de clase múltiple

Cualquier etiqueta html puede tener un atributo de tipo clase.

Un misma clase puede ser por diferentes etiquetas tantas veces como se necesite.

Por ejemplo:

<span class="relevante">Un contenido cualquiera</span>
<p class="importante">Un contenido cualquiera</p>

El selector de clase siempre empieza con un punto. Es importante no olvidarlo.

.importante{
/*instrucciones CSS que afectan a todas las etiquetas con el atributo de clase importante*/
}
.importante.destacado{
/*instrucciones CSS que afectan a todas las etiquetas con el atributo de clase importante y destacado al mismo tiempo*/
}

Cuando una etiqueta tiene varias clases simultáneas

<p class="importante destacado">texto de un párrafo cualquiera</p>

Entonces el selector recibe el nombre de «selector de clase múltiple».

Es importante concatenar todas las clases con un punto y sin espacios en blanco.

Selector de identificador

En cada documento web sólo puede haber (salvo error) una única etiqueta con un determinado identificador.

El identificador se indica en html mediante el atributo id.

Por ejemplo

<div id="container"></div>

Para llamarlo mediante un selector se hace de la siguiente forma:

#container{
/*instrucciones CSS que afecta a la etiqueta con un id determinado*/
}

Aunque parezca rebuscado, puede darse el caso que una etiqueta tenga varios id.

Por ejemplo

<div id="contenedor1 contenedor2"></div>

Para llamarlo mediante un selector se haría de la siguiente forma:

#contenedor1#contenedor2{/*Instrucciones CSS*/}

Selector de atributo

Los selectores de atributo nos sirven para indicar aquellos que tengan un atributo determinado.

Para saber que atributos puede tener una etiqueta dar un vistazo a esta entrada resumen de todos los atributos html que existen.

• Podemos llamar a las etiquetas que tengan un atributo determinado.
• Las entradas con un contenido determinado dentro del atributo.
• Entradas cuyo atributo sea igual, empiece o acabe por unos determinados caracteres.

a[target]{
/*instrucciones CSS que afecta a todas las etiquetas a que tengan un atributo de tipo target*/
}
a[target="_blank"]{
/*instrucciones CSS que afecta a todas las etiquetas a que tengan un atributo de tipo target y cuyo valor sea "_blank"*/
}

Hay una serie de expresiones que pueden ser útiles.

div[class *="col-"]{/*instrucciones CSS que afectan a todos los div con una clase que empieze contenga "col-"*/}
div[class $="4"]{/*instrucciones CSS que afectan a todos los div con una clase que termine por "4"*/}
div[class |="col-xs-"]{/*instrucciones CSS que afectan a todos los div con una clase que empiece por "col-xs-"*/}

Selector descendiente

p span{
/*instrucciones CSS que afectan a todos los span dentro de un párrafo aunque haya etiquetas intermedias.*/
}

Selector hijo

Los selectores de tipo hijo sirven para seleccionar aquellas etiquetas directamente después de una etiqueta determinada.

Se usa el símbolo «>»

li>ul{
/*instrucciones CSS que afecta a todas las etiquetas ul directamente después de una etiqueta li sin etiquetas de por el medio.*/
}

Es importante destacar que no existen etiquetas por el medio.

No significa lo mismo

li ul{/*Instrucciones CSS*/}

que

li>ul{/*Instrucciones CSS*/}

En el primer caso llamamos a todos los ul a continuación de un li aunque haya etiquetas por el medio.

En el segundo caso llamamos a todos los ul directamente a continuación de una etiqueta li. Si existiera una etiqueta intermedia ya no sería lo mismo.

Ejemplo de diferencia entre selector de hijo y de herencia

En la imagen se representa el árbol de nodos de un documento web.

En el esquema se observa como la etiqueta <p> tiene un hijo de nombre <span> y un hijo de nombre <em>. La etiqueta <em> tiene a su vez un hijo de nombre <span>.

• La instrucción p span{color:red;} haría que todos los <span> se colorearan de color rojo.
• La instrucción p>span{color:red;} haría que sólo el<span> hijo del <p> se coloreara de rojo. El <span> hijo de <em> no se colorearía.

Y hasta aquí una entrada extensa en la que hemos repasado los principales selectores que existen.

Aunque no todos. Es importante tener en cuenta que existen más tipos y que para mayor asimilación no los he incluido en esta guía.

Si quieres saber más de recomiendo darle un vistazo al tutorial de w3schools.

Espero que os pueda ser de utilidad.

¡Hasta mañana!