El selector de atributo contiene en CSS3

Poco voy a escribir al respecto del selector de atributo contiene. En la anterior clase estuvimos seleccionando elementos con el selector de atributo con valor. En esta ocasión, vamos a seleccionar un elemento html basándonos en su atributo. Pero en su valor, debe contener al menos una instancia del valor especificado. Es decir, busca que el atributo contenga el valor indicado en cualquier posición.

Debemos definirlo de esta forma:

/* CSS */

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

No te olvides de agregar *, si no lo haces no conseguirás el resultado que esperas. Y recuerda también, que para seleccionarlo con el selector de atributo contiene, debe contener al menos una instancia del valor especificado. Esto lo vas a entender enseguida si realizas el siguiente ejercicio.

Ejercicio

Selecciona los primeros cuatro <article>.

<!-- HTML -->

<main>
<article class="a_post_a">Texto...</article>
<article class="b_post_b">Texto...</article>
<article class="c_post_c">Texto...</article>
<article class="d_post_d">Texto...</article>
<article class="no_select">Texto...</article>
</main>

/* CSS */

main article[class*="post"] { background: red; color: white; padding: 20px; font-size: 20px; margin: 10px; border: 1px solid black;
}

Finalizando la clase

La verdad es que podría enrollarme escribiendo mucho más sobre el selector de atributo contiene. Pero sería un sin sentido y una perdida de tiempo para ti. Asi que si no te ha quedado claro, no dudes en dejar tu consulta debajo, en los comentarios.

En la próxima clase, seguiremos estudiando más selectores. Mientras tanto, gracias por compartir el contenido del blog. Me interesa tu opinión, así que no dudes en dejarme un comentario.

¡HASTA LA PRÓXIMA CLASE!