El selector de atributo "Comienza con..." y "Termina con..." en CSS3

Continuamos con el maravilloso y mágico mundo de los selectores en CSS3. En esta ocasión, vamos a estudiar el selector de atributo "comienza con..." y "Termina con...". Si, es cierto, parece igual que el selector de atributo con valor, pero no.

Me explico, el selector de atributo "comienza con..." y "Termina con...", selecciona el elemento html basado en su atributo. Su valor debe comenzar o terminar, exactamente con el valor de su atributo. Lo vais a entender mejor viendo ejemplos.

Pero primero vamos a ver cual es su sintaxis correcta. Para definir esta regla y seleccionar un elemento con este selector, vamos a usar el acento circunflejo ^. Es un signo diacrítico utilizado en la ortografía normal de diversas lenguas, aunque nosotros lo vamos a usar en CSS3. Para "termina con" utilizamos el signo $, se que son muchos símbolos que recordar, pero si te haces una chuleta, te va a venir muy bien en tus proyectos.

/* CSS */

elemento[atributo^="valor"]{ background: red; }

Os dejo a continuación ejercicios prácticos para que os ayuden a entenderlo mejor. Ya que no voy a alargar más esta clase innecesariamente hablando de el selector de atributo "comienza con..." y "Termina con...". Esta todo dicho por el momento con respecto a este selector.

Ejercicio 1

Selecciona aquellos enlaces que enlazan a un archivo con extensión .pdf.

<!-- HTML -->

<p><a href="nosotros.html">Nosotros</a> | <a href="http://www.google.com">Vamos a Google</a></p>
<p>Por favor <a href="mailto:info@tuweb.com">escribeme a mi correo</a></p>

/* CSS */

p a[href^="http://"] { background: red; color: white; padding: 20px; }

Ejercicio 2

Selecciona aquellos enlaces que empiezan por http://.

<!-- HTML ->

<ul>
<li>Ahora puede <a href="media/documento.pdf">descargar nuestra presentacion</a></li>
<li>También puede <a href="media/documento.doc">descargar nuestra presentación en formato Word</a></li>
</ul>

/* CSS */

ul li a[href$=".pdf"] { background: green; color: white; padding: 10px; }

Finalizando la clase

Un tipo de selector más y terminamos con ellos. Eso si, pasaremos al maravilloso mundo de las pseudo clases y los pseudo elementos. Terminando esto, nos pondremos a aprender a aplicar estilos.

Quiero daros las gracias por compartir el contenido y vuestros me gusta. He puesto una caja de suscripción al blog, para que los que queráis suscribiros recibáis las ultimas novedades. Prometo que no os voy a hacer spam, además

¡HASTA LA PRÓXIMA CLASE!