Selectores de CSS,> versus espacio

¿De qué sirve usar esta syntax?

div.card > div.name 

¿Cuál es la diferencia entre esto

 div.card div.name 

A > B solo seleccionará B que son hijos directos a A (es decir, no hay otros elementos entremedio).

AB seleccionará cualquier B que esté dentro de A, incluso si hay otros elementos entre ellos.

> es el selector de niños. Especifica solo elementos secundarios inmediatos y no cualquier descendiente (incluidos nietos, bisnietos, etc.) como en el segundo ejemplo sin el > .

El selector de elementos secundarios no es compatible con IE 6 y versiones anteriores. Una gran tabla de compatibilidad está aquí .

div.card > div.name matches

....

xxx

...

pero no coincide

....

...

xxx

..

....

div.card div.name coincide con ambos.

Es decir, el selector > se asegura de que el elemento seleccionado en el lado derecho de > sea ​​un elemento secundario del elemento en su lado izquierdo.

La syntax sin el > coincide con cualquier

que sea un descendiente (no solo un niño) de

.