Significado de comodines.

[Caminantejm]

Pregunta muy elemental pero no tanto para el que está profundizando en css.

Creo que [class^="icon-"] significa "todas las clases que empiecen por "icon-"

1.- ¿Es así?

2.- Pero no encuentro qué significa [class*=" icon-"]

¿Me puede decir alguien qué significa?


Saludos y gracias.
Caminantejm.

[Rafael]

No es elemental, de hecho felicidades, porque estos selectores son a mi gusto la fase dos de saber CSS.

El segundo selector es "que contenga" a diferencia del primero que es "que inicie"

Por ejemplo

<p class="icon-1 big">

es diferente a

<p class="big icon-1">

Al usar las dos classes (class^ y class*) juntas lo que estás indicando es:

"Selecciona todos los estilos cuya class comience con icon-; utiliza mi primer selector en el caso de que esta class sea la primera, y el segundo en el caso de que el usuario haya escrito otro class antes que este.

Nota que el selector class* tiene un espacio antes de icon-

La diferencia con ese espacio es que si no lo tuviéramos el estilo aceptaría algo como

<p class="usuarioicon-1">

Pero al poner el espacio antes ya no entraría en la categoría.

[Caminantejm]

Muchas gracias Rafael.
Sí, el espacio en blanco ya lo había visto pero no terminaba de descifrarlo. Además, pasé la consulta al foro porque después de 1 hora me fue imposible sacar la respuesta buscando por la red. La primera expresión sí, pero la segunda no.

Saludos y gracias. Muy bien explicado.
Jesús María.