Какой смысл использовать этот синтаксис
div.card > div.name
Какая разница между этим
div.card div.name
Ответ 1
A > B будет выбирать только B, которые являются прямыми дочерними элементами A (т.е. между ними нет других элементов).
A B выберет любые B, которые находятся внутри A, даже если между ними есть другие элементы.
Ответ 2
> является дочерним селектором. В нем указаны только непосредственные дочерние элементы, а не потомок (включая внуков, правнуков и т.д.).), как во втором примере без >.
Селектор дочерних элементов не поддерживается IE 6 и ниже. Большая таблица совместимости здесь.
Ответ 3
div.card > div.name соответствует <div class='card'>....<div class='name'>xxx</div>...</div>
но он не соответствует <div class='card'>....<div class='foo'> ... <div class='name'>xxx</div>..</div>....</div>
div.card div.name соответствует обоим.
То есть селектор > гарантирует, что выбранный элемент с правой стороны
из > является дочерним элементом элемента с левой стороны.
Синтаксис без > соответствует любому <div class='name'>, который является потомком (а не только дочерним) <div class='card'>.