El selector de atributo con valor en CSS3

Después de haber aprendido a seleccionar elementos con el selector de atributo básico, vamos a profundizar un poco más. Vamos a aprender a seleccionar un elemento, gracias al selector de atributo con valor.

El selector de atributo con valor selecciona el elemento html basado en su atributo que tiene definido un valor. Pero el valor de este atributo, debe ser exactamente el que tiene el elemento que queremos seleccionar. Te recuerdo que puedes pasar a leer la clase etiquetas atributos y valores en HTML5

Lo definiríamos de la siguiente manera:

/* CSS */

elemento[atributo="valor"] { background: #000; }

Esto es todo lo que te voy a contar con respecto al selector de atributo con valor. Lo demás vas a aprenderlo con unos sencillos ejercicios prácticos que vas a encontrar a continuación.

Ejercicio 1

Selecciona aquellos párrafos que tienen definido un atributo title, pero que dentro del atributo title tiene definido el valor principal.

<!-- HTML -->

<section>
  <p title="secundario">Parrafo 1</p>
  <p title="principal">Parrafo 2</p>
  <p title="masinformacion">Parrafo 3</p>
</section>

/* CSS */

section p[title="Principal"] { background: red; color: white; padding: 20px; }

Ejercicio 2

Selecciona las imágenes que están dentro de <section> que contienen el atributo alt.

<!-- HTML -->

<section>
  <img src="propiedades-heredables-css.JPG" alt="Propiedades-heredables-css">>
  <img src="propiedades-heredables-css.JPG" alt="Galeria">>
  <img src="propiedades-heredables-css.JPG" alt="Foto 1">>
  <img src="propiedades-heredables-css.JPG" alt="Foto 2">>
</section>

/* CSS */

section img[alt=Galeria] { border: 2px solid black; padding: 5px; opacity: 0.5; }

Ejercicio 3

Selecciona aquellos enlaces que nos llevan a Facebook.

<!-- HTML -->

<p>
<a href="http://www.google.com">Vamos a Google</a>
<a href="http://www.facebook.com">Vamos a Facebook</a>
</p>

/* CSS */

p a[href="http://www.facebook.com"] { background: blue; color: white; padding: 20px; font-size: 20px; }

Finalizando la clase

Ya habéis visto lo facil que es seleccionar un elemento con el selector de atributo con valor. Pero no crearais que hemos acabado con los selectores, para nada. Yo os espero en la próxima clase, para ayudaros a aprender en este curso de CSS3 desde cero.

Quiero daros las gracias a todas las personas que comparte el contenido de este blog. Déjame un comentario y cuéntame que te ha parecido esta clase. Cuéntame si estas siguiendo el curso, o si necesitas algún tipo de ayuda. Me interesa muchísimo tu opinión ya sea buena o critica constructiva. Un gran abrazo a toda la comunidad.

¡HASTA LA PRÓXIMA CLASE!