Desarrollo de Software

Selectores avanzados de CSS

Hace poco vimos los cinco selectores básicos de CSS con los que podemos maquetar nuestras webs. Pero existen otros selectores avanzados de CSS que nos permiten simplicar las hojas de estilos. Veamos cuáles son.

Selectores avanzados de CSS

Selector de hijo

El selector de hijo viene representado por el signo de mayor que (>):

p > span {
    color: red;
}

Es similar al selector descendiente, pero en este caso selecciona aquellos elementos que son hijos directos de otro elemento. En el ejemplo siguiente pondría Texto de ejemplo a rojo con la definición anterior:

<p><span>Texto de ejemplo</span></p>

mientras que en este otro ejemplo no modificaría el color:

<p><a href='#'><span>Texto de ejemplo</span></a></p>

algo que sí haría el selector descendiente.

Selector adyacente

El selector adyacente viene representado por el signo de suma (+):

h1 + h2 {
    color: red;
}

Selecciona aquellos elementos que son adyacentes a otro elemento; es decir, aquel elemento que es hermano y se encuentra a continuación. En el siguiente ejemplo:

<h1>Título</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>

solo pondrá el texto Subtítulo en rojo, dejando a Otro subtítulo sin modificar su estilo.

Selector hermano

El selector hermano viene representado por el signo virgulilla (~):

h1 ~ h2 {
    color: red;
}

En un selector menos restrictivo que el selector adyacente porque selecciona todos los elementos que son hermanos a otro. En el ejemplo anterior, pondría en rojo tanto Subtítulo como Otro subtítulo.

Selector de atributo

El selector de atributo viene representado por corchetes ([]):

a[class] {
    color: red;
}

Selecciona aquellos elementos que tienen un atributo con el nombre indicado. Hay varios tipos de selectores de atributo:

  • [nombre_atributo], selecciona aquellos elementos que tienen un atributo de nombre nombre_atributo.
  • [nombre_atributo=valor], selecciona los elementos que tienen un atributo llamado nombre_atributo con un valor igual a valor.
  • [nombre_atributo*=valor], selecciona los elementos que tienen un atributo llamado nombre_atributo con un valor en el que aparece la cadena valor.
  • [nombre_atributo^=valor], selecciona los elementos que tienen un atributo llamado nombre_atributo con un valor que comienza con la cadena valor.
  • [nombre_atributo$=valor], selecciona los elementos que tienen un atributo llamado nombre_atributo con un valor que termina con la cadena valor.
  • [data-*=valor], selecciona los elementos que tienen un atributo personalizado de nombre data-* (data-filetype, data-info, data-loquesea) con un valor igual a valor.
  • [nombre_atributo~=valor], selecciona los elementos que tienen un atributo llamado nombre_atributo y con el que uno de los valores (separados por espacios) coincide con el indicado por valor.

Por último

Para finalizar esta trilogía, en un próximo artículo hablaré de las pseudo clases y los pseudo elementos.

Pon un comentario

Tu dirección de email no será publicada.

Puedes usar estas etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>