Aprende a referenciar atributos con CSS3

Sabemos que podemos aplicar estilos CSS a partir de una etiqueta HTML (referenciar por tag), o bien a partir de una parte del documento HTML con un nombre único (referenciar por id), o bien a partir del atributo class (referenciar por clase). A partir de CSS3 se introdujo la posibilidad de referenciar estilos mediante cualquier atributo de elementos HTML.

Los atributos son parámetros asociados a una etiqueta HTML y que tienen un valor concreto. Por ejemplo en <div class=”destacado” > … </div> el atributo class del contenedor div tiene como valor “destacado”. Pero encontramos muchos otros atributos en el código HTML. Algunos ejemplos son:

Ejemplo código	Etiqueta	Atributo	Valor del atributo
<a href="libros.html">Libros de programación</a>	<a>…</a>	href	libros.html
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">	<img …>	src	http://i.imgur.com/afC0L.jpg
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">	<img …>	alt	Notepad++
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">	<img …>	title	Notepad++, un útil editor de texto
<input type="text" name="nombre" />	<input…>	type	text
<input type="text" name="nombre" />	<input…>	name	nombre
<input type="submit" value="Enviar">	<input…>	type	submit

Con CSS podemos aplicar estilos a todos los elementos de un tipo que cumplan tener cierto atributo. La sintaxis a emplear es:

NombreElementoHTML[selectorDeAtributo] { propiedad1ParaEseTipoDeElementos:valor; propiedad2ParaEseTipoDeElementos:valor; … propiedadnParaEseTipoDeElementos:valor; }

Como selector de atributo tenemos distintas posibilidades. A continuación señalamos algunas:

Selector de atributo	Ejemplo CSS	Observaciones
[nombreAtributo]	input[name] { background-color: red;} p[title] {background-color: yellow;} Nota: no puede haber espacio entre el nombre de elemento y el corchete.	Selecciona todos los elementos que tienen el atributo nombreAtributo, independientemente de su valor. En el ejemplo, todos los inputs que lleven name tendrán fondo rojo y todos los párrafos que lleven title tendrán fondo amarillo.
[nombreAtributo = "valor"]	input[name="correo"]{background-color: yellow; font-size:75%;}	Selecciona todos los elementos cuyo nombreAtributo es valor. En el ejemplo, se pone fondo amarillo y tamaño de letra 75% a todos los elementos input con atributo nombre = “correo”. Si el input no tiene nombre ó este no es “correo”, no se aplica.
[nombreAtributo^="valor"]	a[href^="http://www.aprender"] {background-color: yellow; font-size:75%;}	Selecciona todos los elementos cuyo nombreAtributo comienza por valor. En el ejemplo, se pone fondo amarillo y tamaño de letra 75 % a todos los links cuyo atributo href comienza por http://www.aprender
[nombreAtributo*="valor"]	a[href*="aprenderaprogramar"] {background-color: pink; font-size:125%;}	Selecciona todos los elementos cuyo nombreAtributo contiene a valor. En el ejemplo, se pone fondo rosado y tamaño de letra 125 % a todos los links cuyo atributo href contiene aprenderaprogramar.
[nombreAtributo$="valor"]	a[href$=".com"], a[href$="6"] {background-color: pink; font-size:125%;}	Selecciona todos los elementos cuyo nombreAtributo termina en valor. En el ejemplo, se pone fondo rosado y tamaño de letra 125 % a todos los links cuyo atributo href termina en .com ó en 6.

Los selectores ^, * y $ tienen aquí un uso similar al que se da en otros lenguajes para crear lo que se denomina expresiones regulares: expresiones que siguen un determinado patrón (como empezar por…, terminar por…, contener…, etc.).

Escribe código CSS utilizando estos selectores y pruébalos sobre el documento HTML base que estamos usando para el curso. Recuerda no dejar espacios entre el nombre de elemento y los corchetes, es decir, a[href$="6"] es correcto pero a  [  href$="6"  ] no es correcto por contener espacios.

EJERCICIO

Crea una regla de estilos para aplicar la propiedad font-family: Arial a toda la página web. Crea otra regla que afecte a todas las etiquetas de imagen (<img …>) que tengan atributo “title” y aplícales las siguientes propiedades CSS: border-style:solid, border-width: 5px y border-color: LightSalmon. Aplica esta regla al código HTML base que estamos usando para el curso a través del archivo estilos.css con el que estamos aplicando estilos a este documento HTML  y visualiza los resultados.

SOLUCIÓN

El código a incluir en el archivo estilos.css sería el siguiente:

/* Curso CSS estilos aprenderaprogramar.com*/
body {font-family: Arial;}
/*Aplicamos un borde especial a las imágenes que tienen atributo title*/
img[title]{border-style:solid; border-width: 5px; border-color: LightSalmon;}

Nota: si tu navegador no reconoce LightSalmon escribe #FFA07A en lugar de LightSalmon. Es decir, escribiríamos border-color: #FFA07A;

 El resultado al visualizar el documento HTML en el navegador debe ser similar a este, donde vemos las imágenes que tienen atributo title con un borde color salmón:

SELECTORES BÁSICOS FRENTE A ESPECIALES

La mayoría de las páginas web se pueden trabajar con los selectores básicos basados en etiquetas HTML, atributos id y class. En general otros selectores tienen menor uso, en parte porque pueden complicar la dificultad de comprensión de una hoja de estilos. Restringiremos por tanto su uso a casos en que sea especialmente necesario y comentaremos adecuadamente el código CSS cuando los utilicemos.

 Fuente:enlace

Si quieres seguir aprendiendo con nosotros, puedes ingresar a nuestros 

Cursos y Diplomados de Tecnología Web visita www.uneweb.edu.ve  para más información