Selectores Avanzados

SUMARIO

Selector Hijo

El funcionamiento del selector de hijo es análogo al del selector descendente, pero limitando el alcance de la selección a los elementos que son hijos directos del elemento que antecede el "signo de mayor que" (>). Su sintaxis se resume de la siguiente manera:

elementoPadre > elementoHijo { ... }

A continuación se presenta un posible ejemplo de su uso:

<!DOCTYPE html>
<html lang="es">
  <head>
    <style>
      p span { color: red; }
      p > span { color: blue; }
    </style>
  </head>
  <body>
    <p><span>Maese</span></p>
    <p><a href="#"><span>LeGon</span></a></p>
  </body>
</html>

En el ejemplo anterior, se modificaría el color del texto Maese a azul, pues el elemento <span> asociado es un hijo directo de <p>. No obviamos el hecho de que para este elemento también se cumple la regla del selector descendente, pero ante múltiples reglas en conflicto se aplica siempre la más restrictiva, y el selector de hijo es siempre más restrictivo que el selector descendente. El texto LeGon, se mostraría en rojo, ya que el elemento <span> en este caso es hijo directo de un <a> y no de un elemento <p>, pero aunque no se cumple la regla del selector hijo, sí que se cumpliría la del selector descendente.

Selector Adyacente

El selector adyacente se emplea para seleccionar elementos que en el código HTML de la página se encuentran justo a continuación de otros elementos. Su sintaxis emplea el signo + para separar los dos elementos.

elementoAnterior + elementoSeleccionado { ... }

En este selector se deben cumplir dos reglas básicas:

El elementoAnterior y el elementoSeleccionado son hermanos, es decir, tienen el mismo padre y por tanto se encuentran al mismo nivel.
El elementoSeleccionado debe aparecer exactamente justo a continuación del elementoAnterior.

Veamos un ejemplo de su uso:

<!DOCTYPE html>
<html lang="es">
  <head>
    <style>
      h2 { color: green; }
      h1 + h2 { color: red }
    </style>
  </head>
  <body>
    <h1>SMR</h1>
    <h2>Profesorado</h2>
    ...
    <h2>Alumnado</h2>
    ...
  </body>
</html>

Las reglas CSS anteriores hacen que todos los <h2> de la página se vean de color verde, salvo aquellos <h2> que se encuentran inmediatamente después de cualquier elemento <h1> y que se muestran de color rojo. Así pues, en nuestro ejemplo "Profesorado" aparecería de color rojo mientras que "Alumnado" aparecería de color verde.

Selector Predecesor

El selector predecesor se emplea para seleccionar elementos que en el código HTML de la página se encuentran precedidos de otros elementos. Su sintaxis emplea el signo ~ para separar los dos elementos.

elementoPredecesor ~ elementoSeleccionado { ... }

En este selector se deben cumplir dos reglas básicas:

El elementoPredecesor y el elementoSeleccionado son hermanos, es decir, tienen el mismo padre y por tanto se encuentran al mismo nivel.
El elementoSeleccionado debe aparecer precedido del elementoPredecesor, pero no tiene por qué ser el anterior (como ocurre con el selector adyacente).

Veamos un ejemplo de su uso:

<!DOCTYPE html>
<html lang="es">
  <head>
    <style>
      h2 { color: green; }
      h1 ~ h2 { color: red }
    </style>
  </head>
  <body>
    <h1>SMR</h1>
    <h2>Profesorado</h2>
    ...
    <h2>Alumnado</h2>
    ...
  </body>
</html>

Las reglas CSS anteriores hacen que todos los <h2> de la página se vean de color verde, salvo aquellos <h2> que se encuentran precedidos por cualquier elemento <h1> y que se muestran de color rojo. Así pues, en nuestro ejemplo tanto "Profesorado" como "Alumnado" aparecerían de color rojo, ya que ambos son precedidos por el elemento <h1>SMR</h1>.

Selector de Atributo

Los selectores de atributos 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 empieza por valor.
[nombre_atributo$=valor]: selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor acaba en valor.
[nombre_atributo*=valor]: selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y en cuyo valor se encuentra la subcadena 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 es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.

A continuación se muestran algunos ejemplos de selectores de atributo:

/* 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; }

/* Se muestran de color azul todos los enlaces que empleen protocolo https (no los que usen http) */
a[href^="https"] { color: blue; }

/* Se muestran de color azul todos los enlaces cuya ruta acabe en ".es" */
a[href$=".es"] { color: blue; }

/* Se muestran de color azul todos los enlaces que contengan en su ruta la palabra "educem" */
a[href*="educem"] { 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 }

Para una lista completa de todos los posibles selectores puedes consultar la referencia del W3Schools.

AnteriorSelectores Básicos SiguienteHerencia y Resolución de Conflictos

Última actualización hace 2 años

¿Te fue útil?