Utilizando solamente los selectores básicos de la sección anterior, es posible diseñar prácticamente cualquier página web. No obstante, CSS define otros selectores más avanzados que permiten simplificar las hojas de estilos.

Desafortunadamente, el navegador Internet Explorer 6 y sus versiones anteriores no soportaban este tipo de selectores avanzados, por lo que su uso no era común hasta hace poco tiempo. Si quieres consultar el soporte de los selectores en los distintos navegadores, puedes utilizar las siguientes referencias:

Selector de hijos

Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el “signo de mayor que” (>):

p > span { color: blue; }
 
<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>

En el ejemplo anterior, el selector p > span se interpreta como “cualquier elemento <span> que sea hijo directo de un elemento <p>, por lo que el primer elemento <span> cumple la condición del selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendiente pero no es hijo directo de un elemento <p>.

El siguiente ejemplo muestra las diferencias entre el selector descendente y el selector de hijos:

p a { color: red; }
p > a { color: red; }
 
<p><a href="#">Enlace1</a></p>
<p><span><a href="#">Enlace2</a></span></p>

El primer selector es de tipo descendente y por tanto se aplica a todos los elementos <a> que se encuentran dentro de elementos <p>. En este caso, los estilos de este selector se aplican a los dos enlaces.

Por otra parte, el selector de hijos obliga a que el elemento <a> sea hijo directo de un elemento <p>. Por lo tanto, los estilos del selector p > a no se aplican al segundo enlace del ejemplo anterior.

Selector adyacente

El selector adyacente utiliza el signo + y su sintaxis es:

elemento1 + elemento2 { ... }

La explicación del comportamiento de este selector no es sencilla, ya que selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones:

  • elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el mismo.
  • elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página.

En el siguiente ejemplo:

h1 + h2 { color: red }
 
<body>
<h1>Titulo1</h1>
 
<h2>Subtítulo</h2>
...
 
<h2>Otro subtítulo</h2>
...
</body>

Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la página, pero no al segundo <h2>, ya que:

  • El elemento padre de <h1> es <body>, el mismo padre que el de los dos elementos <h2>. Así, los dos elementos <h2> cumplen la primera condición del selector adyacente.
  • El primer elemento <h2> aparece en el código HTML justo después del elemento <h1>, por lo que este elemento <h2> también cumple la segunda condición del selector adyacente.
  • Por el contrario, el segundo elemento <h2> no aparece justo después del elemento <h1>, por lo que no cumple la segunda condición del selector adyacente y por tanto no se le aplican los estilos de h1 + h2.

El siguiente ejemplo es muy útil para los textos que se muestran como libros:

p + p { text-indent: 1.5em; }

En muchos libros, suele ser habitual que la primera línea de todos los párrafos esté indentada, salvo la primera línea del primer párrafo. Con el selector p + p, se seleccionan todos los párrafos que estén dentro del mismo elemento padre que otros párrafos y que vayan justo después de otro párrafo. En otras palabras, el selector p + p selecciona todos los párrafos de un elemento salvo el primer párrafo.

Selector de atributos

El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.

Los cuatro tipos de selectores de atributos son:

  • [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
  • [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
  • [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.
  • [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.

A continuación se muestran algunos ejemplos de estos tipos de selectores:

/* Se muestran de color azul todos los enlaces que tengan 
   un atributo "class", independientemente de su valor */
a[class] { color: blue; }
 
/* Se muestran de color azul todos los enlaces que tengan 
   un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }
 
/* Se muestran de color azul todos los enlaces que apunten 
   al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }
 
/* Se muestran de color azul todos los enlaces que tengan 
   un atributo "class" en el que al menos uno de sus valores
   sea "externo" */
a[class~="externo"] { color: blue; }
 
/* Selecciona todos los elementos de la página cuyo atributo
   "lang" sea igual a "en", es decir, todos los elementos en inglés */
*[lang=en] { ... }
 
/* Selecciona todos los elementos de la página cuyo atributo
   "lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
*[lang|="es"] { color : red }
Gmail acelera la llegada del nuevo Hotmail El equipo de trabajo del servicio de correo electrónico más importante en todo el mundo, según el número de usuarios, dio a conocer la llegada de vari...
phpMyAdmin 3.4.9 phpMyAdmin 3.4.9 es el último lanzamiento de la herramienta de código abierto para administrar base de datos MySQL. Esta actualización de mantenimi...
Ranking Navegadores Marzo 2013 La llamada guerra de los navegadores ha dado lugar en los últimos años a una feroz competencia por ofrecer mayor rapidez, seguridad o funcionalidad co...
Symantec dice que Facebook se dejo robar datos Un nuevo problema de privacidad vuelve a dejar en evidencia a la red social más importante de Internet. Según ha dado a conocer la compañía de segu...
Las acciones de Twitter suben 28,5% Twitter ha registrado crecimientos en todos los sectores. También en pérdidas; la compañía triplica las pérdidas de un año antes. Euforia. Así se...
Google estrena ‘app’ para descubrir arte El Google Cultural Institute ha escaneado hasta 1.427 pinturas en súper alta resolución (gracias a su cámara de gigapíxeles) y ha archivado obras de a...
Impresora 3D basada en el T1000 de terminator 2 El terrorífico robot metálico de “Terminator 2”, que podía volverse líquido para cambiar de forma, inspiró en Estados Unidos un nuevo tipo de impresor...
IBM nos dice como será la tecnología en el mundo del 2016 Con un siglo a sus espaldas, IBM vuelve a mirar hacia el futuro. La compañía americana ha elaborado una vez más su tradicional listado “5 in 5”, vatic...
Debe haber acceso a Internet en los centros de trabajo u oficina? Internet no debe ser un enemigo para nuestra productividad, sino todo lo contrario, un medio de potenciarla. Se trata de una potentísima herramienta q...