Ahora que ya has aprendido lo más básico de CSS y que ya has profundizado con cinco cosas menos básicas que debes saber sobre CSS ya puedes dar el paso y empezar a jugar con los “pros” en esto del CSS.

1. Pseudo elementos

Los pseudo elementos son una de esas cosas menos conocidas de CSS, pero que a veces acaban siendo muy útiles. Existen cuatro de estos pseudo elementos:

1.1. Modificador de primera línea (:first-line)

Gracias al pseudo elemento :first-line podemos modificar la primera línea del texto contenido en un elemento de bloque. El siguiente ejemplo quizás lo aclare un poco más.

RESULTADO:

HTML:

<p id="firstLine">A este texto le aplicamos un estilo solo a la primera línea.
El resto de líneas se dibujaran de forma normal. Y ahora tengo que
rellenar con este texto para que podáis comprobar que efectivamente
funciona tal y como digo. Este tipo de selectores se usan muy poco, pero a veces vienen
muy bien, y mucha gente no los conoce.</p>

CSS:

p#firstLine:first-line
{
color: red;
font-size: large;
background-color: pink;
}

El único uso que he dado alguna vez a este elemento fué para destacar la primera línea de un texto que quería que llamara la atención.

1.2. Modificador de primera letra (:first-letter)

El pseudo elemento :first-letter permite dar un estilo diferente a la primera letra de un párrafo.

RESULTADO:

HTML:

<p id="firstLetter">Este párrafo tiene aplicado un estilo a su primera letra, unicamente. Esto
se usa muchas veces para crear efectos tipográficos similares a los que se usa en muchas publicaciones
impresas.</p>

CSS:

p#firstLetter:first-letter
{
color: blue;
font-size: xx-large;
font-weight: bold;
}

Este elemento se suele utilizar para crear efectos tipográficos habituales en las publicaciones impresas.

1.3. Modificadores :before y :after

Los modificadores :before y :after permiten añadir contenido desde el CSS al final o al principio de un elemento de bloque.

RESULTADO:

HTML:

<p id="beforeandafter">Estos dos selectores son practicamente desconocidos y realmente curiosos.
Permiten añadir cierto contenido (en este caso, el texto en rojo) justo al principio o al final
del que ya le des tú al elemento. Nunca los he llegado a usar en la práctica, pero nunca se sabe...</p>

CSS:

p#beforeandafter:before
{
content: "[PRINCIPIO] - ";
color: red; font-weight: bold;
}
p#beforeandafter:after
{
content: " - [FINAL]";
color: red; font-weight: bold;
}

Uno de los pocos usos que se me ocurren para estos pseudo elementos son los de añadir un icono al principio o al final de un texto, por ejemplo.

2. Pseudo clases

Las pseudo clases, aunque se suelen considerar dentro del “CSS avanzado”, ya sí que son ampliamente conocidas y utilizadas por los diseñadores web y seguramente no os resulten tan raras como los pseudo elementos.

Vamos a ver un ejemplo de como funcionan estas pseudo clases:

Resultado:

Para ver el resultado de esto, descargar el archivo adjunto; en una captura de pantalla no se puede apreciar.

HTML:

<p class="pseudoClasses hover">Pasa el ratón por encima</p>

<p class="pseudoClasses active">Haz clic aquí</p>

CSS:

p.pseudoClasses {
padding: 20px;
margin: 20px;
border: 1px solid red;
}
p.pseudoClasses.hover:hover { background-color: pink; }
p.pseudoClasses.active:active { background-color: pink; }

Estas pseudo clases se utilizan muchísimo en los enlaces, para modificar su aspecto cuando el usuario pasa el ratón por encima o hace clic en ellos.

3. Selectores por valor de atributos

Esto es ya de lo más avanzado que se puede hacer en CSS 2 (otro día hablaré de lo que se puede hacer en CSS 3). Este selector aplica un estilo en función del valor de un atributo cualquiera del elemento. Por ejemplo, fijaros en esta virguería, al combinarlo con el :after que vimos antes:

Resultado:
Wikipedia

HTML:

<p>Mirad que lujo. Colocamos el icono a este enlace a la <a href="http://wikipedia.org/">wikipedia</a> utilizando solamente CSS. Mola, ¿no?</p>

CSS:

a[href^="http://wikipedia.org"]:after { content: url(wikipedia.png); }

La regla de arriba solo se aplica a aquellos enlaces cuyo atributo href empiece por “http://wikipedia.org”.

Esto tiene muchas más aplicaciones… Fijaros en las reglas de este tipo que uso en este mismo blog:

Enlaces a archivos pdf:

Resultado:

Ejemplo.pdf

CSS:

.entry a[href$=".pdf"] {
background: url("images/pdf.gif") right center no-repeat;
padding-right: 15px;
}
.entry a:hover[href$=".pdf"] { background-image: url("images/pdfHover.gif"); }

Es importante fijarse en el símbolo ^ o $ que precede al = en esas reglas. El símbolo ^ indica que el atributo debe empezar por lo que pongas a continuación y el $ significa que estás indicando la terminación. En este caso, seleccionamos todos aquellos enlaces cuyo atributo href termine en .pdf.

Enlaces a archivos descargables:

Resultado:

Ejemplo.zip

CSS:

.entry a[href$=".zip"], .entry a[href$=".rar"], .entry a[href$=".exe"]
{
background: url("images/zip.gif") right center no-repeat;
padding-right: 15px;
}
.entry a:hover[href$=".zip"], .entry a:hover[href$=".rar"], .entry a:hover[href$=".exe"]
{
background-image: url("images/zipHover.gif");
}

4. El selector universal

El selector universal también es bastante conocido, aunque yo creo que menos de lo que debiera. Es bastante útil, y puede ahorrar bastantes líneas de CSS si se utiliza con inteligencia:

Resultado:

HTML:

<p id="universal">El <a href="http://www.w3.org/TR/REC-CSS2/selector.html#universal-selector">selector universal</a> sirve para dar un estilo a <span>cualquier elemento</span>, sea del tipo que sea.
Gracias a eso es posible dar el mismo estilo a todos los elementos que están dentro de este párrafo de forma <strong>sencilla</strong>.</p>

CSS:

#universal * { color: red; font-style: italic; }

5. El selector “+”

El selector “+” permite dar un estilo a cierto elemento solo cuando está precedido por otro. Por ejemplo:

Resultado:

HTML:

<p id="adjacent">El selector + sí que se usa bastante. Permite dar cierto estilo a un elemento solo cuando está
situado justo a continuación de otro. Por ejemplo, vamos a dar un estilo al elemento que esté a
continuación, sea cual sea:</p>
<blockquote>Este texto tendrá el color rojo solo cuando esté a continuación del párrafo
cuyo id es "adjacent". Esto se usa mucho para modificar los márgenes de los títulos en función de lo que haya a
continuación.</blockquote>

CSS:

p#adjacent + * { color: red; }

En mi opinión, el selector + está también bastante infravalorado, quizás por desconocimiento o quizás por no ver su utilidad. Sin embargo, es típico usarlo para variar el tamaño de los márgenes en función de lo que haya a continuación. Por ejemplo, para modificar el margin-bottom de un elemento “header” en función de si a continuación viene un párrafo u otro elemento de cabecera (ese truco se utiliza en el tema de este blog).

Otras partes de esta serie:

Esta entrada es la última parte de la serie “Cinco cosas que debes sabre sobre CSS”:

1. Cinco cosas básicas que debes sabre sobre CSS (aprende CSS en 5 pasos)
2. Cinco cosas (menos básicas) que debes saber sobre CSS
3. Cinco cosas avanzadas que debes saber sobre CSS