El camino hasta ahora

Este artículo forma parte de una selección de entradas dedicadas a la realización de un proyecto PHP desde cero. Como los proyectos PHP suelen ser proyectos web, en las primeras entradas vimos la sintaxis básica de PHP, pero también se ha abordado la creación de un documento HTML5 y la presentación del documento gracias a CSS3.

Englobado pues en el marco de la programación web en PHP, dedico un artículo más a la sintaxis de CSS3, abordando en esta ocasión las pseudo-clases y los pseudo-elementos. Si estás interesado en aprender la sintaxis básica de CSS3, existe una primera parte dónde abordo las reglas y los selectores, conceptos que son necesarios conocer antes de adentrarse en las pseudo-clases y pseudo-elementos.

Las Pseudo-clases en CSS3

Las pseudo-clases vienen a proporcionarnos una solución simplemente exquisita a situaciones donde los selectores no nos permiten llegar o que requeriría la creación de clases extra «no justificadas».

Las pseudo-clases se incorporan al selector de la regla, de forma que, pegado al selector se escriben dos puntos (:) y la pseudo-clase. Ésta sería la sintáxis:

selector:pseudo-clase {
  propiedad: valor;
}

Como pasa con los selectores, tenemos varias pseudo-clases; en CSS3 hay más de 12 pseudo-clases, aquí voy a mostrar unas cuantas, pero puedes consultar la página del estándar para ver todas las existentes http://www.w3.org/TR/css3-selectors/#pseudo-classes

Pseudo clase :hover

Es la pseudo-clase por excelencia, todo el mundo que ha visto un CSS se ha encontrado repetidamente con :hover.

Esta pseudo-clase permite agregar un estilo a una etiqueta cuando el usuario ponga el cursor encima de él. Es muy utilizada con los enlaces para crear el típico efecto de cambio de color en el texto y subrayado de otro color. Sería algo como:

a {
  color: blue;
  text-decoration: none;
}

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

Este CSS tiene dos reglas, una establece que los enlaces son de color azul y sin subrayado, pero cuando pongamos nuestro cursos sobre el enlace, el color pasará a rojo y estará subrayado.

Pseudo-clase :focus

Esta pseudo-clase funciona como la :hover pero en vez de aplicarse cuando se pasa el ratón por encima, lleva a cabo su función cuando el foco está en el elemento. Muy utilizada para aplicar un estilo a los input de un formulario cuando está activado para escribir, o sea, cuando puedes escribir dentro de él.

input {
  border: 1px solid grey;
}

input:focus {
  border: 1px solid blue;
}

En el código CSS mostrado, por defecto se pinta un borde gris de 1px de grosor en las etiquetas HTML input. Cuando el foco se establece en un input, se aplicará la regla que tiene la pseudo-clase focus, cambiando el color del borde de gris a azul.

Las pseudo-clases :link y :visited

Estas pseudo-clases se utilizan para los enlaces; nos permiten establecer un estilo a los enlaces que no hemos visitado (link) y otro a los ya visitados (visited). Es habitual su presencia en las hojas de estilo si quiere destacarse la existencia de enlaces visitados o pendientes de visitar.

• La pseudo-clase :visited es habitual en sitios dónde se quiere remarcar qué has visitado ya.
• La pseudo-clase :link es útil cuando quieres que tus usuarios visiten enlaces dando dar un estilo llamativo a lo que aún no han visitado.

Como es natural, aunque se definan dos reglas, una para cada pseudo-clase, sólo se utilizará una ya que un enlace o ha sido visitado o no 😉

Normalmente las pseudo-clases aplicadas a enlaces se declaran juntas:

a, a:link, a:visited {
  color: blue;
}

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

En este ejemplo indicamos que el enlace tendrá la fuente de color azul para su estado normal (a), cuando el enlace esté pendiente de visitar o haya sido visitado e indicamos que cambiará el color por rojo y eliminará el subrayado cuando se produzca el efecto hover.

También estamos aprovechando que queremos el mismo estilo tanto para a como para a:link y a:visited, por lo que en vez de declarar tres reglas, declaramos sólo una, colocando los selectores separados por comas. A efectos prácticos es lo mismo que:

a {
  color: blue;
}

a:link {
  color: blue;
}

a:visited {
  color: blue;
}

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

Así que, los unimos para ahorrarnos líneas de código y, por lo tanto, peso en nuestros ficheros CSS 😉

También, en vez de lo escrito, podemos poner sólo:

a {
  color: blue;
}

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

¿Por qué? Bueno, normalmente los navegadores tienen un estilo por defecto para aplicar a los documentos, de forma que exista un estilo mínimo aunque la web no lo especifique. Cuando en nuestro CSS3 creamos una regla con un selector de etiqueta a, ésta pasa a ser la única regla aplicable, o sea, sea cual sea el estilo a aplicar por el navegador sólo tendrá en cuenta el selector que hemos creado. Así pues, no existe nada que aplicar en los momentos :link ni :visited… y como queremos que sea lo mismo no decimos nada y sólo creamos una regla para el :hover.

Pseudoclase :first-child

A medida que los proyectos web van añadiendo complejidad tanto en el número de pantallas a mostrar como en la estructura del código HTML y su maquetación, nos encontraremos con problemas puntuales. Un ejemplo típico es un menú horizontal.

El menú superior de toda página web, debería ser un listado de elementos, o sea un ul:

<ul class="menu">
  <li>elemento 1</li>
  <li>elemento 2</li>
</ul>

Bien; una lista por defecto muestra los elementos uno debajo del otro; al tratarse de un menú lo que queremos es que salgan en la misma línea, para ello podemos decir que los elementos floten (viejo estilo de maquetación) o que se muestren inline-block (moderlo estilo de maquetación con CSS3).

ul.menu li {
  display: inline-block;
}

Una vez solucionado el problema del inline, nos encontramos con que los elementos tienen un margen izquierdo y derecho, no pasa nada… los dejamos como queremos…

ul.menu li {
  display: inline-block;
  margin: 0 0 0 10px; /* top right bottom left */
}

De esta forma los elementos del menú tendrán un margen izquierdo de 10px, siendo el resto de cero. Pero nosotros vamos un paso más allá y queremos que ningún elemento tenga margen a la derecha y que sólo el primer elemento de menú no tenga margen a la izquierda, de esta forma podríamos tener un menú que ocupase el 100% del espacio disponible.

Para solucionar este problema, muchos profesionales lo que hacen es crear un class específico para el primer elemento del menú. Es una solución, sin embargo esto conlleva que en nuestro código PHP, cuando generemos el listado tendremos que declarar una variable o condición que identifique si el elemento a mostrar es el primero o no… lo que son líneas de código y tiempo… y eso contando que nosotros hagamos el código PHP porque… ¿y si estás usando WordPress, Drupal u otro CMS? En los CMS este tipo de detalles vienen datos por el sistema y como jamás de los jamases tenemos que hacer la barbaridad de modificar el código del CMS…

Para solucionar este problema y otros tantos, tenemos las pseudo-clase :first-child ya que aplicará el estilo al primer hijo:

ul.menu li {
  display: inline-block;
  margin: 0 0 0 10px;
}

ul.menu li:first-child {
  margin-left: 0;
}

Así, la regla ul.menu li:first-child que declara un margen izquierdo con valor 0, se aplicaría sólo al primer li incluido en el ul con class menu. El resto de los elementos del menú, tendrán su margen izquierdo de 10px.

Pseudo-clase :last-child

Exactamente igual que la :first-child, pero para el último hijo!

Pseudo-clase :nth-child(numero)

Esta pseudo-clase de gran potencia es una de las novedades en CSS3 y permite personalizar los estilos para el hijo n. Como ejemplo, tenemos en nuestro HTML un listado de 8 elementos:

<ul class="menu">
  <li>elemento 1</li>
  <li>elemento 2</li>
  <li>elemento 3</li>
  <li>elemento 4</li>
  <li>elemento 5</li>
  <li>elemento 6</li>
  <li>elemento 7</li>
  <li>elemento 8</li>
</ul>

Queremos que el tercer elemento del listado tenga una fuente de color verde. Utilizando la pseudo-clase nth-child:

ul.menu li:nth-child(3) {
  color: green;
}

Además, esta pseudo-clase tiene la capacidad de crear reglas más complejas. Por ejemplo, un problema habitual a la hora de maquetar tablas y/o listados es la posibilidad de alternar dos estilos para sus diferentes elementos.

Hasta ahora, esto se solucionaba a nivel de programación, colocando un class para los elementos pares y otro para los impares. Gracias a CSS3 y la potencia de esta pseudo-clase, podemos establecer un estilo para todos los elementos pares de nuestro menú de esta forma tan sencilla:

ul.menu li:nth-child(2n) {
  color: green;
}

Pseudo-clase :nth-last-child(numero)

Otra de las nuevas pseudo-clases de CSS3 es la nth-last-child. Su funcionamiento y características es igual que nth-child con la salvedad de que empieza a contar por el final en vez de por el inicio.

Es una pseudo-clase útil cuando quieres aplicar un estilo, por ejemplo, al penúltimo elemento de un listado, pero no sabes el total de elementos que van a existir:

ul.menu li:nth-last-child(2) {
  color: green;
}

Pseudo-clase :lang

Esta pseudo-clase nos permite aplicar estilos cuando una etiqueta tiene un atributo de idioma concreto, muy útil para sitios multi-idioma:

p:lang(es) {
  color: green;
}

Se aplicará a todos los párrafos (p) que estén declarados con un lang=»es»

Los pseudo-elementos

Se podría pensar que con todos los tipos de selectores, pseudo-clases y los diferentes elementos HTML tenemos más que suficiente para maquetar nuestros proyectos, pero la realidad es que no.

Si quieres aplicar un estilo a la primera letra de una palabra nada de lo ya visto sirve. Vale, se podría pensar que puedes hacer algo así:

[code]

<span class="big">T</span>exto

Bueno… por poder se puede, pero no es correcto; piensa que estás colocando una etiqueta span que divide una palabra, se supone que ningún elemento HTML debe dividir una palabra porque la palabra es la unidad final de contenido… debe ser indivisible.

Así pues, necesitamos algo que nos permita aplicar un estilo a la primera letra sin que ello nos conlleve dividir la palabra; para situaciones como ésta tenemos los pseudo-elementos.

En CSS2.1, los pseudo-elementos tenían la misma sintaxis que las pseudo-clases, lo que resultaba confuso. En CSS3 ha cambiado, de forma que la sintaxis de los pseudo-elementos utilizan :: en vez de : o sea:

selector::pseudo-elemento {
  propiedad: valor;
}

Pseudo-elemento ::first-line

Como su nombre indica, este pseudo-elemento se aplica a la primera línea de texto existente dentro de un elemento HTML. Sólo funciona en elementos de tipo bloque o celda, o sea p, div, td

p {
  width: 200px;
  color: black;
}

p::first-line {
  color: red;
}

En la primera regla indicamos que los párrafos deben tener un ancho de 200px y la fuente será de color negro. La segunda regla utiliza el pseudo-elemento first-line para indicar que el texto que se ubique en la primera línea tendrá un color de fuente rojo.

Pseudo-elemento ::first-letter

Este pseudo-elemento aplicaría el estilo a la primera letra de la primera línea de texto existente dentro de un elemento HTML. Al igual que el ::first-line, sólo puede utilizarse con elementos de tipo bloque o celda.

p {
  font-size: 14px;
}

p::first-letter {
  font-size: 20px;
}

En nuestro ejemplo, establecemos primero la regla para que los párrafos tengan un tamaño de fuente de 14px y con el pseudo-elemento first-letter haremos que la primera letra del párrafo tendrá un tamaño de 20px.

Pseudo-elementos ::before y ::after

Estos pseudo-elementos se tienen que utilizar combinados con la declaración de la propiedad «content» ya que insertará en la etiqueta HTML del selector el contenido indicado como valor de «content». Evidentemente, será insertado antes o después según el pseudo-elemento utilizado.

Nuestro listado de elementos, podríamos escribirlo así:

<ul class="menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
</ul>

y utilizar el pseudo-elemento before para que a la hora de pintar el listado, el navegador inserte el texto «elemento » antes del número de cada uno:

ul.menu li::before {
  content: "elemento ";
}

Es muy útil a la hora de establecer un formato único en la clasificación de los diferentes titulares, aunque son pseudo-elementos muy poco utilizados.

Pseudo-elemento ::selection

Es el pseudo-elemento nuevo en CSS3 y, sin duda, maravilloso. Con este pseudo-elemento establecemos un estilo para el texto que el usuario selecciona con el ratón… o sea, que si tu haces lo típico de seleccionar un párrafo para copiarlo… en CSS3 le puedes aplicar un estilo concreto a este texto, simplemente genial!

p::selection {
 background: blue;
 color: red;
}

Resolviendo conflictos de estilos en CSS3

Muchas veces nos encontraremos con que existe una regla que no puedes modificar y, además, se impone frente a una regla declarada por ti.

Dado este caso, lo primero que debemos intentar conseguir es depurar nuestra regla para que sobrescriba la regla con la que tenemos el conflicto. De no ser posible, tenemos la posibilidad de forzar que use tu declaración gracias a !important. Declaración, ya que !important no se aplica sobre el selector, sino que se hace sobre el valor de una propiedad.

elemento {
  propiedad: valor;
  propiedad: valor!important;
}

Soporte CSS3 en navegadores

Desafortunadamente, el soporte CSS3 no es tan bueno como debería en los diferentes navegadores… como siempre en nuestro querido Internet Explorer (IE) es dónde tenemos el peor soporte para CSS3. Hay que tener en cuenta que los navegadores obsoletos no incorporan ni van a incorporar soporte para CSS3 ya que no existen actualizaciones, esto se traduce en reglas no soportadas en los IE 5,6,7 e incluso 8… es a partir de IE9 donde el soporte empieza a ser decente.

Aunque es cierto que versiones viejas de Firefox, Opera y Chrome el soporte tampoco existe, se tratan de navegadores que se actualizan solos y cuyas últimas versiones corren en Windows XP por lo que normalmente quien utiliza estos navegadores los tiene actualizados… y si no… es vital que los mantenga actualizado.

Existe un sitio web dónde puedes ver el estado de soporte para los selectores según los navegadores, es algo muy útil para conocer tus limitaciones a la hora de utilizar estilos según los requisitos mínimos de navegadores bajo los que debe funcionar la aplicación:

http://www.css3.info/selectors-test/

En la próxima entrega

Tras un artículo sobre HTML5 y cuatro sobre CSS3 va siendo hora de retornar el tan preciado PHP. Si quieres continuar profundizando en CSS3 tienes un buen manual en librosweb.es.

En los próximos artículos dejaremos a un lado CSS3 para ver el uso de los require e include de PHP que necesitaremos para aplicar el patrón MVC (Modelo, Vista Controlador).

A medida que nuestro proyecto vaya creciendo, volveremos a ver CSS3 de forma integrada e iremos descubriendo más secretos del genial CSS3