Selectores de atributos en CSS3

En esta entrada vamos a ver algunos de los selectores de atributos más significativos de CSS2 y CSS3.

Mediante los selectores de CSS podemos seleccionar diferentes elementos de nuestra web para dar a éstos una forma determinada aplicando estilos.

Con los selectores de atributos, podemos aplicar estilos definidos, a los elementos de nuestra web que tengan determinados atributos y éstos un valor determinado.

Puede resultar un poco confuso teóricamente todo esto, pero en la práctica es bastante sencillo.

Antes de nada aplicaremos determinados estilos para los ejemplos.

div {
	width:100px;
	height:100px;
	background-color:#999;
	float:left;	
	margin-left:10px;	
}

span {
	width:100px;
	height:100px;
	background-color:#555;
	float:left;	
	margin-left:10px;
}

[atr]

En este ejemplo aplicaremos un estilo determinado a los elementos que tengan un determinado atributo, independientemente del valor que tenga éste.

Para el ejemplo hemos añadido a nuestro código CSS

[title]{
	border:5px dotted #333;
}

Ahora todos nuestros objetos que tengan el atributo title aparecerán con el nuevo estilo aplicado.

<div></div>
<div title="Cualquier valor"></div>

div[atr]

En este ejemplo aplicaremos estilos a un determinado tipo de elementos que tengan un atributo especificado, independientemente del valor que tenga éste.

Ahora todos nuestros objetos div que tengan el atributo title aparecerán con el nuevo estilo aplicado.

div[title]{
	border:5px dotted #C00;
}

<div></div>
<div title="Cualquier valor"></div>

Como podemos ver en el ejemplo únicamente aplica los estilos al elemento div que tiene el atributo title, independientemente de su valor.

[atr=valor]

En este ejemplo aplicaremos estilos a los elementos que tengan un determinado atributo y su valor se igual que el que nosotros hemos especificado.

Ahora todos nuestros objetos div que tengan el atributo title con valor Azul aparecerán con el nuevo estilo aplicado.

div[title]{
	border:5px dotted #C00;
}
[title="Azul"]{
	background-color:#039;	
}

<div title="Cualquier valor"></div>
<div title="Azul"></div>

Podemos ver de una forma clara en este ejemplo, como es aplicado el estilo background azul al elemento span y a div por tener el atributo title con un valor azul. Por el contrario el estilo border únicamente se aplica a los elementos div que tengan el atributo title independientemente del valor de éste.

[atr ~= valor]

En este ejemplo aplicaremos estilos a los elementos que tengan en el valor de un atributo una lista de palabras y una de llas coincida.

Ahora aplicaremos el nuevo estilo a nuestros elementos que tengan el atributo title y en su valor aparezca la palabra especificada.

Para los que no sepan como escribir el símbolo ~ (Alt Gr 4).

[title ~= "lista"]{
	background-color:#fff;	
	box-shadow: 0.2em 0.2em  0.5em #333;	
}

<div title="Cualquier valor"></div>
<div title="Azul"></div>

<div title="esto es una lista de palabras"></div>

[atr |= "valor"]

En este ejemplo aplicaremos estilos a los elementos en los que el valor de su atributo comienze por una determinada palabra y a su vez lleve un guión.

Teóricamente es complicado de explicar. Con este ejemplo se entenderá mucho mejor y veremos que es muy sencillo.

Voy a emplear para el ejemplo elementos div, pero este selector es muy apropiado para aplicar estilos a listados de elementos img.

Logotipo-1.jpg
Logotipo-2.jpg
Logotipo-3.jpg

Para los que no sepan como escribir el símbolo | (Alt Gr 1).

[title |= "Extremadura"]{
	background-color:#0F0;
}

<div title="Extremadura-1"></div>
<div title="Otro valor diferente"></div>
<div title="Extremadura-3"></div>

[atr^"valor"]

En este ejemplo aplicaremos estilos a todos los elementos que tengan el atributo seleccionado y su valor comience por unos caracteres en concreto.

Con este ejemplo se entenderá mucho mejor y veremos que es muy sencillo.

[title ^= "So"]{
	box-shadow: 0.2em 0.2em  0.5em #333;
	border:2px double #C00;
}

<div title="Sopa vegana"></div>
<div title="Solomillo vegano"></div>
<div title="Muy rico todo"></div>

[atr $= "valor"]

En este ejemplo aplicaremos estilos a todos los elementos que tengan el atributo seleccionado y su valor termine por unos caracteres en concreto.

Con este ejemplo se entenderá mucho mejor y veremos que es muy sencillo.

[title $= "css3"]{
	box-shadow: 0.2em 0.2em  0.5em #333;
	border:2px double #C00;
}

<div title="Ejemplos de css3"></div>
<div title="Ejemplos de css4"></div>
<div title="Texto que no dice nadaabolutamentecss3"></div>

A mi personalmente me parece muy interesante este selector para asignar una imagen determinada dependiendo de la extensión, pdf, rar, txt, doc, jpeg, etc.

[attr *= "val"]

En este ejemplo aplicaremos estilos a todos los elementos que tengan el atributo seleccionado y en su valor unos caracteres concretos, sin importar la posición de éstos.

Con este ejemplo se entenderá mucho mejor y veremos que es muy sencillo.

[title *= "rr"]{
	box-shadow: 0.2em 0.2em  0.5em #333;
	border:2px double #C00;
}

<div title="Extremadura"></div>
<div title="Terrícolas"></div>
<div title="Tierra de Fuego"></div>

Muy importante

No debemos olvidar que no sólo podemos aplicar los estilos mediante elementos como hemos hecho en los ejemplos anteriores, también podemos hacerlo aplicándolos a clases como vamos a ver en este ejemplo.

.sombra{ 
	box-shadow: 0.2em 0.2em  0.5em #333;
}
.sombra[title]{	
	border:5px dotted #333;
}

<div class="sombra"></div>
<div class="sombra" title="Cualquier valor"></div>

Desde aquí

Puedes descargar un archivo con el código de estos ejemplos. Habrá código comentado para que puedas ir probando uno a uno.
La contraseña para descomprimir es: untitled.es

Espero que os haya servido de ayuda.

@eneakao