Significado de comodines.

[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.