Selectores básicos

Hay cuatro tipos de selectores básicos, y en la mayoría de webs y blogs, con ellos es más que suficiente para realizar su diseño. Como mucho se usa el combinador descendiente (que luego veremos) sin que en muchas ocasiones su diseñador sepa que lo está usando (debido en parte a su notación, un espacio en blanco).

Selector universal

El selector universal, que se introdujo por primera vez en la segunda versión de CSS, selecciona todos los elementos de una página. Es un selector de poco uso, ya que generalmente no se necesita darle el mismo estilo a todos y cada uno de los elementos; sin embargo, bien usado puede ser muy útil.

* {
    color: blue;
    font-size: 20px;
}

Con estas dos simple líneas, contenidas entre las llaves, conseguimos que todos los elementos de nuestro documento tengan un tamaño de texto de 20px y de color azul (no es muy útil, pero sólo es un ejemplo). Como puedes ver el selector universal se representa por un asterisco (*).

Selector de etiqueta

El selector de etiqueta o selector de tipo, nos permite seleccionar uno o más elementos HTML con idéntico nombre. Por ejemplo, si queremos seleccionar todos los elementos p de nuestro documento HTML usaríamos el selector p que daría estilo a todos los párrafos de la página.

p {
    color: blue;
    font-size: 20px;
}

Selectores class e ID

En CSS tenemos la posibilidad de seleccionar un elemento HTML en función al valor del atributo class o del valor del atributo ID. El valor de estos elementos es una cadena de mínimo un carácter, que no puede contener espacios, y que evidentemente nosotros elegimos cuando creamos el HTML.

Este selector usa el mismo nombre que el valor que tenga el atributo en HTML precedido bien por un punto (.), si es un selector class o una almohadilla (#), si es un selector ID. La única diferencia es que en nuestro HTML el valor de ID debe ser único y el de class puede ser el mismo para diferentes elementos, permitiéndonos en CSS seleccionar un único elemento o varios según usemos uno u otro.

<div id="rojo">
   <p>texto</p>
   <p class="azul">texto</p>
</div>
<div class="azul">
   <p>texto</p>
</div>

#rojo {
    color:red;
}

.azul {
    color:blue;
}

En el ejemplo hemos creado una clase cuyo valor es azul y una ID con valor rojo. Mediante CSS damos estilo a las etiquetas de HTML a las que les hemos asignado esos atributos. Por tanto el primer párrafo será rojo, debido a la herencia recibida de la etiqueta div con id="rojo". Sin embargo el siguiente párrafo será azul, ya que tiene asignada la clase "azul". También será azul el contenido de la etiqueta div con clase azul.

Combinadores

CSS nos de una herramienta muy útil que nos permite crear selectores más complejos y específicos combinando los selectores básicos. El selector creado a partir de los combinadores puede ser tan largo como sea necesario, aunque para un mejor rendimiento es aconsejable no excederse. En esencia funcionan de manera muy similar a los operadores de cualquier lenguaje de programación.

Selector de descendientes

El selector de descendientes, o más exactamente combinador de descendientes, nos permite crear un selector más específico para dar estilo a todos los descendientes que cumplan la norma creada por el selector. Esto incluye no sólo a sus descendientes inmediatos, también llamados hijos, sino también a los descendientes de estos y sucesivos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. Su notación es quizás la más confusa, ya que se usa un espacio en blanco.

#contenedor .parrafo {
    margin: 5px;
    padding: 2px;
    background-color: green;
}

Con este selector daremos estilo a todos lo elementos que tengan un atributo class de valor "parrafo" y además estén contenidos dentro de un elemento con un atributo ID de valor "contenedor". Mejor lo vemos con este código HTML:

<div id="contenedor">
    <p class="parrafo">texto</p>
    <p>texto</p>
    <a href="#"><p class="parrafo">texto</p></a>
</div>

En este ejemplo damos etilo a primer y tercer párrafos, ya que ambos cumplen con el selector que hemos creado. El segundo párrafo no tiene la clase de valor "parrafo". El tercer párrafo, a pesar de estar contenido dentro de un anchor, cumple con el selector ya que sólo tiene que ser descendiente de "contenedor" y en este caso lo es.

Selector de hijos

Es un selector similar al de descendientes, sin embargo su funcionamiento es algo diferente. Se utiliza para seleccionar sus hijos inmediatos y se indica mediante el signo "mayor que" (>).

p > span {
    color: red;
}

<p>texto<span>texto</span>más texto</p>
<p><a href="#">texto<span>texto</span></a>más texto</p>

En este ejemplo sólo se aplica el estilo a la primera etiqueta span, ya que la segunda al estar contenida en un anchor no es hija directa de p.

Selector de adyacentes

El selector de adyacentes nos permite seleccionar el elemento hermano que se encuentra inmediatamente después en el código HTML. Su sintaxis es elemento1 + elemento2.

p + p {
    color: red;
    font-size: 20px;
}

<p>Un texto</p>
<p>Otro texto</p>
<p>Otro texto más</p>

En el caso de este ejemplo la regla se aplica tanto segundo como al tercer párrafo, ya que el segundo es hermano directo del primero y el tercero es hermano directo del segundo.

Selector general de hermanos

Es un selector muy parecido al selector de adyacentes, pero más general, ya que selecciona a todos los elementos hermanos que se encuentren después en el HTML. su sintaxis es elemento1 ~ elemento2.

h2 ~ p {
    margin: 10px 0;
}

<h2>Título</h2>
<p>Un texto</p>
<p>Otro texto</p>
<div class="caja">
    <p>Otro texto más</p>
</div>

En este ejemplo seleccionamos los dos primeros párrafos, pues ambos son hermanos de h2 y se encuentran después de él en el HTML. El tercer párrafo, por contra, no se selecciona, ya que aunque se encuentra después de h2, no es su hermano.

Selector de atributo

El selector de atributo selecciona un elemento basándose en la presencia y/o valor de un atributo en HTML, y se declara usando corchetes. Para la selección del elemento tenemos seis posibilidades, basándonos en si seleccionamos sólo el atributo o si por contra nos basamos también en su valor:

• elemento[atributo]: seleccionamos todos los elementos que disponen de ese atributo.
• elemento[atributo^="valor"]: seleccionamos todos los elementos que disponen de ese atributo y cuyo valor comienza exactamente por la cadena de texto indicada.
• elemento[atributo$="valor"]: seleccionamos todos los elementos que disponen de ese atributo y cuyo valor termina exactamente en la cadena de texto indicada.
• elemento[atributo*="valor"]: seleccionamos todos los elementos que disponen de ese atributo y cuyo valor es exactamente el de la cadena de texto. En este caso el asterisco (*) es opcional.
• elemento[atributo~="valor"]: seleccionamos todos lo elementos que disponen de ese atributo y cuyo valor es una lista de palabras separadas por espacios en blanco, en la que al menos una es exactamente igual a valor.
• elemento[nombre_atributo|="valor"]: seleccionamos todos lo elementos que disponen de ese atributo y cuyo valor es una serie de palabras separadas con guiones y que comienza con valor. Este selector sólo es útil para atributos de tipo lang.

<form class="contact_form" action="#" method="post">
    <label for="name">Nombre:</label>
    <input type="text" name="nombre"  placeholder="Nombre y apellidos" autofocus required />
    <label for="email">Email:</label>
    <input type="email" name="email" placeholder="ejemplo@ejemplo.com" required />
    <label for="website">Sitio Web:</label>
    <input type="url" name="web" placeholder="http://www.tuweb.com" />
    <label for="Mensaje">Mensaje:</label>
    <textarea name="mensaje" required ></textarea>
    <button type="submit">Enviar</button>
</form>

input[type="text"] {
    backgroun-color: #444;
    widht: 150px;
}

input[placeholder^="http"] {
   color: blue;
}

En este ejemplo seleccionamos la etiqueta input que tiene el atributo type y cuyo valor es exactamente text y le damos color de fondo igual a #444 y un ancho de 150px. También seleccionamos otra etiqueta input, pero esta vez la que tiene el atributo placeholder y cuyo valor empieza por http. Evidentemente podríamos haber hecho lo mismo usando el selector class o el seletor ID, pero dependiendo de lo que vayamos a seleccionar nos vendrá mejor una u otra solución, además nos hemos ahorrado algo de marcado en el HTML.

Pseudo-clases y pseudo-elementos

Pseudo-clases

Una pseudo-clase selecciona un elemento dentro del DOM pero bajo determinadas condiciones, como por ejemplo respecto a la posición que ocupa en relación a sus hermanos o cuando está bajo un estado determinado. Se podría decir actúa de la misma forma que si hubiésemos añadido una clase a un elemento en nuestro marcado. Su sintáxis es selector:pseudo-clase. La más común, y que seguramente ya has usado en alguna ocasión es :hover.

a:hover {
    color: red;
    text-decoration: none;
}

Por defecto los enlaces de texto son de color azul y subrayados. En este ejemplo cambiamos su color a rojo y eliminamos el subrayado cuando pasamos el ratón por encima del enlace.

Sin embargo la clasificación de las pseudo-clases es muy extensa. Por ejemplo :hover pertenece a las pseudo-clases dinámicas, también llamadas de acción de usuario por la W3C, pero hay muchas más como las que se basan en los elementos de entrada (:enabled o :checked), las estructurales que permiten la selección del elemento basándose en la información extra que existe en el árbol del documento pero que no es accesible mediante selectores básicos o combinadores (:first-child o :nth-of-type()) ... Prometo que me extenderé más en un artículo especifíco y veremos al menos las más usadas.

Pseudo-elementos

Un pseudo-elemento crea un nuevo elemento que no se ha especificado dentro del marcado, pero que podemos manipular al igual que cualquier otro elemento. Esto nos permite dar estilo a aquellas situaciones en las que ninguno de los anteriores selectores funciona, como por ejemplo dar estilo a la primera línea de una párrafo, o porqué no a la primera letra del mismo.

En cuanto a su notación se puede usar exactamente la misma que para las pseudo-clases para mayor compatibilidad con navegadores antiguos o "dobles dos puntos" (::), que es su notación correcta en la especificación de CSS3.

.caja::before {
    content: "";
    display: block;
    widht: 20px;
    height: 40px;
    background-color: blue;
}

En este ejemplo lo que hacemos es crear una caja de 20x40px y de color rojo inmediatamente antes de cada elemento cuya clase tenga el valor "caja". También ampliaremos las pseudo-clases en otro artículo más específico.