El Selector de atributo de una lista de valores separados por un espacio

Avanzamos en el curso de CSS3 desde cero, estudiando el ultimo selector al fin. Estoy hablando del selector de atributo de una lista de valores separados por un espacio.

El selector de atributo de una lista de valores separados por un espacio, selecciona el elemento html, basándose en su atributo. Pero su valor debe ser igual a una lista de palabras separadas por un espacio en blanco y uno de ellos debe contener exactamente el valor seleccionado.

La sintaxis correcta sería la siguiente:

/* CSS */

[Atributo~="valor"]

El símbolo que se añade después del atributo ~, se llama virgulilla y es un signo ortográfico en forma de coma, rasguillo o trazo. La virgulilla generalmente es identificada como la tilde de la eñe o virgulilla de la eñe. Si queréis más información con respecto a la virguilla podéis pasar por la Wikipedia.

Para terminar con el selector de atributo de una lista de valores separados por un espacio, vamos a realizar un sencillo ejercicio.

Ejercicio

Selecciona aquellos elementos que contienen la palabra Titulo.

<!-- HTML -->

<h1 title="Titulo Principal">Titulo 1</h1>
<h2 title="Titulo Secundario">Sub Titulo</h2>

[title~="Titulo"]{ background: red; color: white; padding: 20px; }

Más fácil no os lo he podido poner, pero era simplemente para que lo entendierais a través de un ejemplo. Pues sobre el selector de atributo de una lista de valores separados por un espacio, esta todo dicho. A no ser que tengáis alguna duda, si es así dejad vuestras preguntas en los comentarios o usad el formulario de contacto.

Finalizando la clase

Pues queridos amigos y amigas, al fin hemos terminado con los tipos de selectores que vamos a necesitar para crear nuestro sitio web. Seguramente, algunos selectores no los usaremos nunca o casi nunca. Sobre todo si a lo que nos vamos a dedicar es a crear sitios pequeños. Pero no está demás que los conozcamos por si acaso.

En la siguiente clase, vamos a comenzar a estudiar las pseudo clases y los pseudo elementos. Pero van a ser pocas clases, así que en poco tiempo habremos completado el primer modulo del curso.

Muchas gracias por visitar el blog, por compartir en redes sociales, por vuestros me gusta, en definitiva gracias por estar ahí.

¡HASTA LA PRÓXIMA CLASE!